Quasar CLI with Webpack - @quasar/app-webpack
将项目转换为Quasar CLI with Webpack

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

builddevServer和所有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 > metaVariablesmetaVariablesFn

更多信息:配置PWA

7. 与BEX有关

BEX模式有相当大的不同。Quasar CLI与Webpack项目中的PWA模式不支持PWA清单V3和多个内容脚本。你必须手动将你的BEX文件移植到新的架构中。

最好的办法是$ quasar mode add bex,然后移植你的BEX。

更多信息:准备工作和文件夹结构配置BEX

8. 然后我们就完成了

$ quasar dev
$ quasar build