App CLI v2升级指南

  • 本指南指的是将Quasar应用从@quasar/appv1升级到使用v2。
  • 请注意,@quasar/appquasar是不同的软件包(一个是Quasar App CLI,一个是Quasar UI),每个软件包都有自己的版本。

v2的新功能

  • 浏览器兼容性现在更清楚地表达了。
  • 重新思考了JS转换(在Babel的帮助下)(现在使用core-js v3)。 现在,它将根据您配置的浏览器兼容性 进行转换。 它将不再直接转译为ES5,而是将根据配置的浏览器准确查找JS功能需要转译的内容。 但是请注意这一点,因为在选项列表中添加一个“坏苹果”就足够了,这将使您的代码笨拙地回到ES5。
  • 由于上述原因,不再需要“modern build”。 但是,如果要禁用转译(完全等效),现在可以:quasar.conf.js > build > transpile: false。
  • 支持替换/src/statics/public文件夹。 新文件夹将允许您在根目录/应用程序基础级别提供静态内容,而不是提供statics/*。 一个有用的例子:robots.txt
  • SSR模式现在也支持自定义publicPath
  • 现在,默认情况下,已配置的publicPath将应用于开发模式
  • Capacitor v2和Workbox v5支持
  • 更简单的quasar.conf.js > build > transpileDependencies; 现在它支持String(自动将其转换为`/node_modules/…’)和Regexes
  • 更简单的quasar.conf.js > build > env; 您不再需要JSON.stringify每个值(您现在不必!)
  • 更简单的quasar.conf.js > 框架配置对象; “all”属性已重命名为“importStrategy”,并且允许“all”或“auto”(默认)值
  • 用于启动文件和preFetch(publicPath)的新参数; 现在,“redirect()”方法完全支持Vue路由器位置对象(在所有构建模式下,在服务器端或客户端);preFetch钩子现在也接收“urlPath”参数
  • 应用扩展安装脚本的新API方法:api.renderFile()
  • 临时删除quasar.conf.js > build > preloadChunks(直到使用html-webpack-plugin v4确保兼容性)
  • 升级到最新版本的Typescript(在编写这些行时为v3.9.5;还将需要“quasar” v1.12.6)
  • 许多其他改进和修复

升级指南

遵循本指南最多只需5分钟即可完成。

必要步骤

  • 依赖

    • 如果在/package.json中,则删除“resolutions” > “@babel/parser”
    • 手动执行yarn/npm install @quasar/app v2:yarn add --dev @quasar/app@^2.0.0(或npm install --save-dev @quasar/app@^2.0.0)。
    • 如果您使用的是PWA(或SSR + PWA)模式,则还需要安装workbox-webpack-plugin@^5.0.0(或^4.0.0 - @quasar/app v1随附的v4)- 该软件包不再由“@quasar/app”提供:yarn add --dev workbox-webpack-plugin@^5.0.0(或npm install --save-dev workbox-webpack-plugin@^5.0.0
    • yarn/npm install core-js v3:yarn add core-js@^3.0.0(或npm install core-js@^3.0.0
    • 重要提示:运行quasar upgrade -i,以确保安装了所有Quasar软件包的最新版本
  • 编辑您的/ quasar.conf.js文件:

    • 将“all”重命名为“importStrategy”(有效值:“auto”或“all”;默认为“auto”)
    • 删除“supportIE”(现在通过package.json > browserslist处理)
    • 如果存在,请删除“build” > “modern”(由于优越的浏览器兼容性策略,因此不再需要)
    • 删除“build” > “webpackManifest”和“forceDevPublicPath”(不再使用/不再需要)
    • 编辑您的“build” > “env”:删除对JSON.stringify()的使用; 而不是someProp: JSON.stringify('some-value') -> someProp: 'some-value'
    • 删除“build” > “preloadChunk”(暂时删除,直到与html-webpack-plugin v4兼容)
  • 编辑您的/package.json文件:

    • 如果“cordovaId”和“capacitorId”在那里,请删除它们
    • 更新“browserslist”; 其作用; 从默认值中得到启发:
    "browserslist": [
      "last 10 Chrome versions",
      "last 10 Firefox versions",
      "last 4 Edge versions",
      "last 7 Safari versions",
      "last 8 Android versions",
      "last 8 ChromeAndroid versions",
      "last 8 FirefoxAndroid versions",
      "last 10 iOS versions",
      "last 5 Opera versions"
    ]
    

    现在,只有在“browserslist”中包含IE11支持(即ie 11ie >= 11)或您的任何查询都无声地包含了IE11支持(例如:> 0.5%)时,才启用IE11支持。

  • 更新到新的/public文件夹(它将替换旧的/src/statics):

    • 对“statics/”进行全局搜索与替换,替换为“”(空字符串),包括在/quasar.conf.js中。
    • /src/statics/*移至/public/*; 然后将“/public/icons/favicon.ico”直接移到“/public”下
  • 编辑您的/ src / index.template.html文件:

    • 搜索“htmlWebpackPlugin.options”。 并替换为“”(空字符串)
    • 更新favicon.ico<link>指向href="favicon.ico",而不是“statics/icons/favicon.ico”(某些浏览器或工具要求在根目录下存在favicon.ico ,这是q/app v2现在可以提供的功能之一)
  • 您可以将/src-capacitor依赖项升级到Capacitor v2(支持Android X); 现在,两个版本都包含了全部支持(感谢Capacitor团队的帮助); 请同时查看Capacitor(从v1到v2)的升级指南! 有用的链接:关于Capacitor v2的公告升级指南发行说明

  • 对于Typescript开发人员:请确保还将“quasar”软件包也升级到v.12.6+。 仅与Quasar CLI相关的内部功能类型(例如,BootFileParams)已移至@quasar/app下(以前由quasar软件包提供)。 如果您在代码中对它们有任何引用,请将import语句更改为使用@quasar/app,或考虑切换为使用quasar/wrappers提供的更简洁的包装器功能。

  • webpack-html-plugin软件包已升级到v4; 如果您篡改了默认配置,请查看它

  • copy-webpack-plugin软件包已升级到v6; 如果您更改了默认配置,请查看它

  • 如果您使用SSR模式进行构建,则可以使用自定义publicPath,但是需要对所有app.use()语句进行少量更改:

    // for ALL app.use() statements
    // in /src-ssr/ files:
    
    // from:
    app.use('<path>', ...)
    // to:
    app.use(ssr.resolveUrl('<path>'), ...)
    
  • 如果使用Electron进行构建,则将主线程文件(/src-electron/main-process/main.js)中的QUASAR_NODE_INTEGRATION替换为process.env.QUASAR_NODE_INTEGRATION(如果存在)。

可选步骤

以下步骤是可选的,但建议执行。

  • 如果您使用的是IconGenie CLI),请升级到v2.3+,其中引入了对@quasar/app v2项目的支持。

  • 编辑您的/src/router/routes.js文件:

    将:

    // Always leave this as last one
    if (process.env.MODE !== 'ssr') {
      routes.push({
        path: '*',
        component: () => import('pages/Error404.vue')
      })
    }
    

    …替换为:

    // Always leave this as last one
    routes.push({
      path: '*',
      component: () => import('pages/Error404.vue')
    })