将项目转换为 Quasar CLI with Vite

Quasar CLI with Vite - @quasar/app-vite

本页将指导您如何将 Quasar CLI with Webpack（@quasar/app-webpack v4）项目转换为 Quasar CLI with Vite（@quasar/app-vite v2）项目。

第 1 步：编辑 package.json

Quasar CLI with Webpack 项目依赖 /package.json > browserslist 来指定目标浏览器。该属性在新架构中不再有任何意义。Quasar CLI with Vite 管理的项目工作方式完全不同，建议您查阅浏览器兼容性页面了解详情。

dependencies: {
- core-js
},

devDependencies: {
- "@quasar/app-webpack": "^4.0.0"
+ "@quasar/app-vite": "^2.0.0"

+ "postcss": "^8.5.8"
+ "postcss-rtlcss": "^5.4.0" // 如果使用 RTL 支持则需要添加

- eslint-webpack-plugin
- ts-loader
- workbox-webpack-plugin
}

- browserslist: {}

记得运行 yarn/npm/pnpm/bun install 安装依赖。

第 2 步：处理各种文件

删除 /babel.config.js，它在新架构中没有任何用处了。
如果您使用了 RTL 支持，则需要编辑 /postcss.config.js。您需要手动安装 postcss-rtlcss 并进行如下修改：
/postcss.config.js
```
+ import rtlcss from 'postcss-rtlcss'

export default {
  plugins: [
+   rtlcss()
  ]
}
```
Copied to clipboard

第 3 步：从原项目文件夹复制目录

从您的原项目文件夹中，将以下目录原样复制过来：

/src
/src-cordova
/src-capacitor
/src-electron
/src-pwa
/src-ssr（有少量注意事项，见后续步骤）
/src-bex（有少量注意事项，见后续步骤）

第 4 步：为所有 import 语句显式指定文件扩展名

确保所有 Vue 组件文件（SFC）在导入时都显式指定了 .vue 扩展名。省略文件扩展名在 Webpack 中可以正常工作（因为 Quasar CLI 为 Webpack 配置了要尝试的扩展名列表），但在 Vite 中则不行。

// 错误！无法正常工作：
import MyComponent from "./MyComponent";

// 正确：
import MyComponent from "./MyComponent.vue";

第 5 步：检查新的 quasar.config 配置文件

以下属性的详细说明请参阅 quasar.config 配置文件页面。

- eslint: {
-   // fix: true,
-   // include: [],
-   // exclude: [],
-   // cache: false,
-   // rawEsbuildEslintOptions: {},
-   // rawWebpackEslintPluginOptions: {},
-   warnings: true,
-   errors: true
- },

build: {
- esbuildTarget: {
-   browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
+ target: {
+   browser: 'baseline-widely-available',
    node: 'node22'
  },

- webpackTranspile
- webpackTranspileDependencies
- webpackDevtool

- htmlFilename
- rtl
- showProgress
- gzip
- vueCompiler

- extendWebpack () {}
- chainWebpack () {}
+ extendViteConf (viteConf, { isServer, isClient }) {}

+ viteVuePluginOptions
+ vitePlugins

+ useFilenameHashes
+ polyfillModulePreload

- uglifyOptions
- scssLoaderOptions
- sassLoaderOptions
- stylusLoaderOptions
- lessLoaderOptions
- vueLoaderOptions
- tsLoaderOptions
},

devServer: {
- server: {
-  type: 'http'
- }
},

sourceFiles: {
- indexHtmlTemplate: 'index.html'
}

第 6 步：SSR 相关

export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext } */) => {
  if (jsRE.test(file)) {
-   return `<script src="${file}" defer crossorigin></script>`;
+   return `<link rel="modulepreload" href="${file}" crossorigin>`;
  }

第 7 步：BEX 相关

- declare module '@quasar/app-webpack' {
+ declare module '@quasar/app-vite' {
  interface BexEventMap {
    // ...
  }
}

// 所有 content script 文件都需要修改：

- declare module '@quasar/app-webpack' {
+ declare module '@quasar/app-vite' {
  interface BexEventMap {
    // ...
  }
}

第 8 步：代码检查（Linting）

如果您使用了 ESLint，建议查看这里了解相关要求。

第 9 步：大功告成

$ quasar prepare
$ quasar dev
$ quasar build

发现错误？在浏览器中编辑此页

1. Introduction

1.1. 第 1 步：编辑 package.json

1.2. 第 2 步：处理各种文件

1.3. 第 3 步：从原项目文件夹复制目录

1.4. 第 4 步：为所有 import 语句显式指定文件扩展名

1.5. 第 5 步：检查新的 quasar.config 配置文件

1.6. 第 6 步：SSR 相关

1.7. 第 7 步：BEX 相关

1.8. 第 8 步：代码检查（Linting）

1.9. 第 9 步：大功告成