此页面将指导您如何将 Quasar CLI with Webpack (@quasar/app-webpack - 以前称为 @quasar/app) 项目转换为 Quasar CLI with Vite 项目 (@quasar/app-vite).
步骤 1：创建一个 Quasar CLI with Vite 项目文件夹
$ yarn create quasar
# then pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Vite"根目录文件存在重大更改，因此生成一个新的项目文件夹比解释所有这些更改更容易。
步骤 2：从原始文件夹复制文件夹
从您的原始项目文件夹中，按原样复制以下内容
- /src (有一些细微差别；请参见后续步骤)
- /src-cordova
- /src-capacitor
- /src-electron
- /src-pwa (有一些细微差别；请参见后续步骤)
- /src-ssr (有一些细微差别；请参见后续步骤)
/src-bex不，不要！
将 /src/index.template.html 移动到 /index.html。并进行以下更改
- <!-- DO NOT touch the following DIV -->
- <div id="q-app"></div>
+ <!-- quasar:entry-point -->此外，编辑 /src/router/index.js
// old way
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
// new way
history: createHistory(process.env.VUE_ROUTER_BASE)步骤 3：在所有导入语句中显式指定扩展名
确保所有 Vue 组件文件 (SFC) 都用其显式指定的 .vue 扩展名导入。省略文件扩展名在 Webpack 中有效（由于 Quasar CLI 为其配置了要尝试的扩展名列表），但在 Vite 中无效。
// BAD! Will not work:
import MyComponent from './MyComponent'
// GOOD:
import MyComponent from './MyComponent.vue'步骤 4：检查新的 quasar.config 文件
在 build、devServer 和所有 Quasar 模式（pwa、ssr 等）中存在属性更改。属性在 quasar.config 文件 页面中详细说明。您需要手动将您的配置移植到使用 Vite 架构的 Quasar CLI。
TypeScript 别名
如果您正在使用 TypeScript 并在 tsconfig.json > compilerOptions > paths 中定义了自定义路径别名，它们将不再自动处理。请参阅 文件夹别名 | 处理 Vite 以了解可用的处理方法。
步骤 5：浏览器兼容性
使用 Webpack 的 Quasar CLI 项目依赖于 /package.json > browserslist 来指定您要针对的浏览器。该属性不再有任何意义。由使用 Vite 的 Quasar CLI 管理的项目的工作方式完全不同，您可能需要查看 浏览器兼容性 页面。
步骤 6：SSR 相关
- 删除
/src-ssr/directives文件夹（如果您有它） - 它不再有任何作用；查看 Vue SSR 指令 页面 - 将
/src-ssr/production-export.js文件移植到/src-ssr/server.js；请务必先阅读有关 SSR Web 服务器 的内容
更多信息：配置 SSR
步骤 7：PWA 相关
- 非常重要：在移植文件之前，运行命令
quasar mode add pwa。否则，所有需要的软件包将不会被添加，并且您的构建将失败。 - 输出的服务工作者文件的默认名称已从
service-worker.js更改为sw.js。这可能会在第一次加载新应用程序时中断您的更新流程。因此，如果您的应用程序处于生产环境中，为了确保从以前的 Webpack 构建平滑升级，请确保名称与您以前的服务工作者文件的名称匹配。您可以通过 quasar.config 文件 > pwa > swFilename 设置它。 - 使用 Webpack 的 Quasar CLI 依赖于
quasar.config 文件 > manifest来指定清单，但您需要使用/src-pwa/manifest.json来为使用 Vite 的 Quasar CLI 声明它。在/src-pwa/manifest.json中声明清单后，删除quasar.config 文件 > manifest部分。 - 在
quasar.config文件中也有一些属性不再可用。最值得注意的是：metaVariables、metaVariablesFn。只需编辑/index.html并直接在那里添加这些标签。
<head>
<% if (ctx.mode.pwa) { %>
<!-- Define your custom PWA-related meta/link tags here. -->
<% } %>
</head>更多信息：PWA - 准备
步骤 8：BEX 相关
BEX 模式差异很大。使用 Vite 的 Quasar CLI 项目中的 PWA 模式支持 PWA 清单 v3 和多个内容脚本。您需要手动将您的 BEX 文件移植到新架构，这应该非常容易。
最好 $ quasar mode add bex，选择您首选的 PWA 清单版本（v2 或 v3）并移植您的 BEX。
步骤 9：我们完成了
$ quasar dev
$ quasar build