此页面将指导您如何将使用 Vite (@quasar/app-vite) 的 Quasar CLI 项目转换为使用 Webpack (@quasar/app-webpack) 的 Quasar CLI 项目。

步骤 1：创建一个使用 Webpack 的 Quasar CLI 项目文件夹

$ yarn create quasar
# then pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Webpack"

根文件存在重大更改，因此生成一个新项目文件夹比解释每个更改更容易。

步骤 2：从原始文件夹复制文件夹

从您的原始项目文件夹中，按原样复制这些文件夹

• /src (有少量注意事项；请参阅后续步骤)
• /src-cordova
• /src-capacitor
• /src-electron
• /src-pwa
• /src-ssr (有少量注意事项；请参阅后续步骤)
• /src-bex 不要！

此外，将 /index.html 移动到 /src/index.template.html。并进行以下更改

<!-- quasar:entry-point -->

// replace with:

<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>

此外，编辑 /src/router/index.js

// old way
history: createHistory(process.env.VUE_ROUTER_BASE)

// new way
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)

步骤 3：检查新的 quasar.config 文件

在 build、devServer 和所有 Quasar 模式（pwa、ssr 等）中，属性发生了变化。这些属性在 quasar.config 文件 页面中有详细介绍。您需要手动将您的配置移植到使用 Webpack 的 Quasar CLI 架构中。

步骤 4：浏览器兼容性

使用 Webpack 的 Quasar CLI 项目依赖于 /package.json > browserslist 来指定您要定位的浏览器。更多信息：浏览器兼容性 页面。

步骤 5：与 SSR 相关

将 /src-ssr/server.js 移植到 /src-ssr/production-export.js 文件。请务必先阅读有关 SSR 生产导出 的内容。production-export.js 本质上是从 src-ssr/server.js 默认导出的 listen() 方法。其他所有功能无法移植。

更多信息：配置 SSR

步骤 6：与 PWA 相关

对于使用 Webpack 的 Quasar CLI 项目，/src-pwa/manifest.json 没有任何意义。您需要使用 quasar.config 文件 > manifest 在那里声明它。之后，删除 /src-pwa/manifest.json 文件。

另请检查 quasar.config 文件 > pwa > metaVariables 和 metaVariablesFn。

更多信息：配置 PWA

步骤 7：与 BEX 相关

BEX 模式存在很大差异。使用 Webpack 的 Quasar CLI 项目中的 PWA 模式不支持 PWA 清单 v3 和多个内容脚本。您需要手动将您的 BEX 文件移植到新的架构中。

最好 $ quasar mode add bex 并移植您的 BEX。

更多信息：准备和文件夹结构 和 配置 BEX。

步骤 8：我们完成了

$ quasar dev
$ quasar build