本页将指导你如何将Quasar CLI with Vite(@quasar/app-vite) 项目转换成Quasar CLI with Webpack(@quasar/app-webpack)。
1. 创建一个Quasar CLI with Webpack项目文件夹：
$ yarn create quasar
# or:
$ npm init quasar
# or:
$ pnpm create quasar # experimental support
# 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:
// Change:
history: createHistory(process.env.VUE_ROUTER_BASE)
// Into:
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
3. 检查新的quasar.config.js
build、devServer和所有Quasar模式（pwa、ssr等）的属性都有变化。这些属性在quasar.config.js页面上有详细介绍。你必须将你的配置手动移植到具有Webpack架构的Quasar CLI中。
4. 浏览器兼容性
Quasar CLI with Webpack项目依靠/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相关
/src-pwa/manifest.json对Quasar CLI with Webpack项目没有意义。你将需要使用quasar.config.js > manifest来声明它。之后再删除/src-pwa/manifest.json文件。
同时检查quasar.config.js > pwa > metaVariables和metaVariablesFn。
更多信息：配置PWA
7. 与BEX有关
BEX模式有相当大的不同。Quasar CLI与Webpack项目中的PWA模式不支持PWA清单V3和多个内容脚本。你必须手动将你的BEX文件移植到新的架构中。
最好的办法是$ quasar mode add bex，然后移植你的BEX。
更多信息：准备工作和文件夹结构 和 配置BEX。
8. 然后我们就完成了
$ quasar dev
$ quasar build