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

¥This page will guide you on how to convert a Quasar CLI with Webpack (@quasar/app-webpack v4) project into a Quasar CLI with Vite one (@quasar/app-vite v2).

步骤 1:编辑 package.json(Step 1: Edit package.json)

¥Step 1: Edit package.json

Quasar CLI 与 Webpack 项目依赖 /package.json > browserslist 来指定你正在使用的浏览器定位。该属性不再有任何意义。使用 Quasar CLI 和 Vite 管理的项目工作方式完全不同，你可能需要查看 浏览器兼容性 页面。

¥A Quasar CLI with Webpack project relies on /package.json > browserslist to specify which browsers you are targeting. That property no longer has any meaning. Projects managed by Quasar CLI with Vite work completely different and you might want to check the Browser Compatibility page.

dependencies: {
- core-js
},

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

+ "postcss": "^8.4.14"
+ "postcss-rtlcss": "^5.4.0" // if using RTL support

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

- browserslist: {}

记得安装 yarn/npm/pnpm/bun。

¥Remember to yarn/npm/pnpm/bun install.

步骤 2:各种文件(Step 2: Various files)

¥Step 2: Various files

• 删除 /babel.config.js。现在它没有任何作用。

  ¥Delete /babel.config.js. It will serve no purpose now.

• 如果你使用 RTL 支持，请编辑 /postcss.config.js。你需要手动安装 postcss-rtlcss 并进行以下编辑：

  ¥If you are using using the RTL support, then edit /postcss.config.js. You will need to manually install postcss-rtlcss and make the following edit:

  /postcss.config.js

  ---

  + import rtlcss from 'postcss-rtlcss'
  
  export default {
    plugins: [
  +   rtlcss()
    ]
  }

  content_paste

  Copied to clipboard

步骤 3:复制原始文件夹中的文件夹(Step 3: Copy folders from original folder)

¥Step 3: Copy folders from original folder

从你的原始项目文件夹中，按原样复制以下内容：

¥From your original project folder, copy these as they are:

• /src

• /src-cordova

• /src-capacitor

• /src-electron

• /src-pwa

• /src-ssr（有一点小警告；请参阅后续步骤）

  ¥/src-ssr (with small caveat; see next steps)

• /src-bex（有一点小警告；请参阅后续步骤）

  ¥/src-bex (with small caveat; see next steps)

步骤 4:在所有导入语句中明确指定扩展名(Step 4: Explicitly specify extensions on all your import statements)

¥Step 4: Explicitly specify extensions on all your import statements

确保所有 Vue 组件文件 (SFC) 都已导入，并明确指定其 .vue 扩展名。省略文件扩展名对于 Webpack 有效（因为 Quasar CLI 配置了可供其尝试的扩展名列表），但对于 Vite 无效。

¥Make sure that all your Vue component files (SFC) are imported with their .vue extension explicitly specified. Omitting the file extension works with Webpack (due to Quasar CLI configured list of extensions for it to try), but not with Vite too.

// BAD! Will not work:
import MyComponent from './MyComponent'

// GOOD:
import MyComponent from './MyComponent.vue'

步骤 5:检查新的 quasar.config 文件(Step 5: Check the new quasar.config file)

¥Step 5: Check the new quasar.config file

以下属性在 quasar.config 文件 页面中有详细说明。

¥The following props are detailed in the quasar.config file page.

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

build: {
- esbuildTarget: {
+ target: {
    browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
    node: 'node20'
  },

- 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 相关(Step 6: SSR related)

¥Step 6: SSR related

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

步骤 7:BEX 相关(Step 7: BEX related)

¥Step 7: BEX related

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

// for ALL content script files:

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

步骤 8:Linting(Step 8: Linting)

¥Step 8: Linting

如果你使用的是 ESLint，你可能需要检查 此处 的要求。

¥If you are using ESLint, you might want to check the requirements for it here.

步骤 9:大功告成(Step 9: And we’re done)

¥Step 9: And we’re done

$ quasar prepare
$ quasar dev
$ quasar build