App CLI v2升级指南 | Quasar Framework 中文网

App CLI v2升级指南

本指南指的是将Quasar应用从@quasar/appv1升级到使用v2。
请注意，@quasar/app和quasar是不同的软件包（一个是Quasar App CLI，一个是Quasar UI），每个软件包都有自己的版本。

::: warn 这不是指Quasar v2，而是指App CLI v2。 :::

App CLI 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 11或ie >= 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”软件包也升级到v1.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（如果存在）。

另外，如果使用Electron，请在/src-electron/main-process/main.js中进行以下替换:

// 以前的方式
if (process.env.PROD) {
  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
}

// 新方法（用这个替换上面的）
if (process.env.PROD) {
  global.__statics = __dirname
}

可选步骤

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

如果您使用的是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')
})

阅读更多?