本页将指导你如何将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