将项目转换为使用Vite的Quasar CLI项目

Quasar CLI with Vite - @quasar/app-vite

本页将指导你如何将Quasar CLI with Webpack (@quasar/app-webpack - 以前称为@quasar/app)项目转换成Quasar CLI with Vite项目(@quasar/app-vite)。

1. 创建一个Quasar CLI with Vite项目文件夹。

$ yarn create quasar
# or:
$ npm init quasar
# or:
$ pnpm create quasar # experimental support

# pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Vite"

根文件有很大的变化，所以生成一个新的项目文件夹比解释每一个许多变化更容易。

2. 从原始文件夹中复制文件夹

从你的原始项目文件夹中，按原样复制这些东西。

/src (有小的注意事项，见下一步)
/src-cordova
/src-capacitor
/src-electron
/src-pwa (有小的注意事项；见下一步)
/src-ssr (with small caveat; see next steps)
~~/src-bex~~ **不。不要！ **

将/src/index.template.html移到/index.html。并做如下修改。

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

// replace with:

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

另外，编辑/src/router/index.js。

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

3. 检查新的quasar.config.js

build、devServer和所有Quasar模式（pwa、ssr等）的属性都有变化。这些属性在quasar.config.js页面中有详细介绍。你必须将你的配置手动移植到具有Vite架构的Quasar CLI中。

4. 浏览器兼容性

Quasar CLI with Webpack项目依靠/package.json > browserslist来指定你所针对的浏览器。这个属性不再有任何意义。由Quasar CLI与Vite管理的项目工作方式完全不同，你可能想检查浏览器兼容性页面。

5. SSR相关

删除/src-ssr/directives文件夹（如果你有的话）–它不再有任何作用；查看 Vue SSR Directives 页面
将/src-ssr/production-export.js文件移植到/src-ssr/server.js；确保先阅读SSR Webserver。

更多信息。配置SSR

6. PWA相关

**非常重要：在移植你的文件之前，运行quasar mode add pwa命令。否则所有需要的包都不会被添加，你的构建会失败。

输出的服务工作者文件的默认名称已经从service-worker.js改为sw.js。这可能会在新应用第一次加载时破坏你的更新过程。因此，如果你的应用程序是在生产中，为了确保从以前的Webpack构建中顺利升级，请确保名称与你以前的服务工作者文件的名称一致。你可以通过[quasar.config.js > pwa > swFilename]（/quasar-cli-vite/developing-pwa/configuring-pwa#quasar-config-js）来设置。
Quasar CLI with Webpack依靠quasar.config.js > manifest来指定清单，但你需要使用/src-pwa/manifest.json来为Quasar CLI with Vite申报。在/src-pwa/manifest.json中声明清单后，删除quasar.config.js > manifest部分。
quasar.config.js中还有一些属性已不再可用。最明显的是 metaVariables, metaVariablesFn. 只需编辑/index.html并在那里直接添加这些标签。

<!-- index.html -->
<head>
  <% if (ctx.mode.pwa) { %>
    <!-- Define your custom PWA-related meta/link tags here. -->
  <% } %>
</head>

更多信息。PWA - 准备

7. BEX相关

BEX模式有相当大的不同。Quasar CLI with Vite项目中的PWA模式支持PWA清单v3和多个内容脚本。你必须手动将你的BEX文件移植到新的架构上，不过这应该是相当容易的。

最好是$ quasar mode add bex，选择你喜欢的PWA清单版本（v2或v3）并移植你的BEX。

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

8. 然后我们就完成了

$ quasar dev
$ quasar build