构建系统使用 Vite 创建你的网站/应用（/src 文件夹）的 UI。如果你不熟悉 Vite，也不用担心。开箱即用，你无需进行任何配置，因为它已经设置好了一切。

¥The build system uses Vite to create the UI of your website/app (/src folder). Don’t worry if you aren’t acquainted with Vite. Out of the box, you won’t need to configure it because it already has everything set up.

更新 Vite 配置(Updating Vite config)

¥Updating Vite config

你可能已经注意到，你的 Quasar CLI 和 Vite 项目中不存在 vite.config.js / vite.config.ts 文件。这是因为 Quasar CLI 会为你生成 Vite 配置，这样你就不必担心了。

¥You may have noticed that the vite.config.js / vite.config.ts file does not exist in your Quasar CLI with Vite project. This is because Quasar CLI generates the Vite configuration for you so that you don’t have to worry about it.

如果你需要调整，可以通过 quasar.config 文件 > build > expandViteConf 进行，如下所示：

¥In case you need to tweak it, you can do so through quasar.config file > build > extendViteConf like so:

build: {
  extendViteConf (viteConf, { isServer, isClient }) {
    // We return an Object which will get deeply merged into
    // the config, instead of directly tampering with viteConf
    return {
      build: {
        chunkSizeWarningLimit: 750
      }
    }
    // equivalent of following vite.config.js/vite.config.ts:
    // export default defineConfig({
    //   build: {
    //     chunkSizeWarningLimit: 750
    //   }
    // })
  }
}

请注意，你无需返回任何内容。extendViteConf(viteConf) 的参数是 Quasar 为你生成的 Vite 配置对象。你可以添加/删除/替换其中的几乎任何内容，前提是你确实知道自己在做什么。请勿篡改输入和输出文件或任何其他已由 quasar.config file > build 配置的选项。

¥Notice that you don’t need to return anything. The parameter of extendViteConf(viteConf) is the Vite configuration Object generated by Quasar for you. You can add/remove/replace almost anything in it, assuming you really know what you are doing. Do not tamper with the input and output files though or any other option that is already configured by quasar.config file > build.

如果你想添加一些 Vite 插件，请参阅下面的 添加 Vite 插件 部分。

¥If you want to add some Vite plugins, see the Adding Vite plugins section below.

检查 Vite 配置(Inspecting Vite Config)

¥Inspecting Vite Config

Quasar CLI 为此提供了一个实用的命令：

¥Quasar CLI offers a useful command for this:

$ quasar inspect -h

  Description
    Inspect Quasar generated Vite config

  Usage
    $ quasar inspect
    $ quasar inspect -c build
    $ quasar inspect -m electron -p 'build.outDir'

  Options
    --cmd, -c        Quasar command [dev|build] (default: dev)
    --mode, -m       App mode [spa|ssr|pwa|bex|cordova|capacitor|electron] (default: spa)
    --depth, -d      Number of levels deep (default: 2)
    --path, -p       Path of config in dot notation
                        Examples:
                          -p module.rules
                          -p plugins
    --thread, -t     Display only one specific app mode config thread
    --help, -h       Displays this message

添加 Vite 插件(Adding Vite plugins)

¥Adding Vite plugins

请确保使用 yarn/npm 安装你想要使用的 vite 插件包，然后编辑 /quasar.config 文件：

¥Make sure to yarn/npm install the vite plugin package that you want to use, then edit the /quasar.config file:

build: {
  vitePlugins: [
    // both are perfectly equivalent:
    [ '<plugin-name>', { /* plugin options */ } ],
    [ '<plugin-name>', { /* plugin options */ }, { server: true, client: true } ]
  ]
}

你可以在客户端或服务器端禁用插件，这在开发 SSR 应用时尤其有用：

¥You can disable a plugin on the client-side or the server-side, which is especially useful when developing a SSR app:

build: {
  vitePlugins: [
    // disable on the server-side:
    [ '<plugin-name>', { /* plugin options */ }, { server: false } ],

    // disable on the client-side:
    [ '<plugin-name>', { /* plugin options */ }, { client: false } ]
  ]
}

支持多种语法：

¥There are multiple syntaxes supported:

vitePlugins: [
  [ '<plugin1-name>', { /* plugin1 options */ }, { server: true, client: true } ],
  [ '<plugin2-name>', { /* plugin2 options */ }, { server: true, client: true } ],
  // ...
]

// or:
import plugin1 from 'plugin1'
import plugin2 from 'plugin2'

vitePlugins: [
  [ plugin1, { /* plugin1 options */ }, { server: true, client: true } ],
  [ plugin2, { /* plugin2 options */ }, { server: true, client: true } ],
  // ...
]

// finally, you can specify using the form below,
// but this one has a drawback in that Quasar CLI cannot pick up
// when you change the options param so you'll have to manually
// restart the dev server
import plugin1 from 'plugin1'
import plugin2 from 'plugin2'

vitePlugins: [
  plugin1({ /* plugin1 options */ }),
  plugin2({ /* plugin2 options */ })
  // ...
]

如果你愿意，还可以通过 extendViteConf() 在 /quasar.config 文件中添加 Vite 插件。这对于（但不限于）SSR 模式尤其有用，在这种模式下，你希望 Vite 插件仅应用于服务器端或客户端：

¥And, should you want, you can also add Vite plugins through extendViteConf() in the /quasar.config file. This is especially useful for (but not limited to) SSR mode where you’d want a Vite plugin to be applied only on the server-side or the client-side:

import plugin1 from 'plugin1'
import plugin2 from 'plugin2'

build: {
  extendViteConf (viteConf, { isClient, isServer }) {
    viteConf.plugins.push(
      plugin1({ /* plugin1 options */ }),
      plugin2({ /* plugin2 options */ })
      // ...
    )
  }
}

此外，请不要忘记你的 /quasar.config 文件导出一个接收 ctx 作为参数的函数。你可以在整个配置文件中使用它，以便将设置仅应用于某些 Quasar 模式，或者仅应用于开发或生产环境：

¥Moreover, don’t forget that your /quasar.config file exports a function that receives ctx as parameter. You can use it throughout the whole config file to apply settings only to certain Quasar modes or only to dev or prod:

export default defineConfig((ctx) => {
  return {
    build: {
      extendViteConf (viteConf, { isClient, isServer }) {
        if (ctx.mode.pwa) {
          viteConf.plugins.push(/* ... */)
        }

        if (ctx.dev) {
          viteConf.plugins.push(/* ... */)
        }
      }
    }
  }
})

示例：rollup-plugin-copy(Example: rollup-plugin-copy)

¥Example: rollup-plugin-copy

在构建到生产环境的过程中，你可能需要将静态文件或外部文件复制到 Quasar 项目中，rollup-plugin-copy 允许你在构建应用时复制文件和文件夹。

¥It is likely that you will need to copy static or external files to your Quasar project during the build to production process, rollup-plugin-copy allows you to copy files and folders when building your app.

// ...
  build: {
  // ...
    vitePlugins: [
      [
        'rollup-plugin-copy', {
          targets: [
            { // Syntax code, check doc in https://www.npmjs.com/package/rollup-plugin-copy
              src: '[ORIGIN_PATH]',
              dest: '[DEST_PATH]'
            },
            { // Copying firebase-messaging-sw.js to SPA/PWA/SSR dest build folder
              src: 'config/firebase/firebase-messaging-sw.js',
              dest: 'dest/spa'    // example when building SPA
            }
          ]
        }
      ]
      // other vite/rollup plugins
    ]
  }
// ...

Vite Vue 插件选项(Vite Vue Plugin options)

¥Vite Vue Plugin options

如果你需要调整 Vite Vue 插件（@vitejs/plugin-vue）选项，可以通过 quasar.config file > build > viteVuePluginOptions 进行操作，如下所示：

¥If you need to tweak the Vite Vue Plugin(@vitejs/plugin-vue) options, you can do so through quasar.config file > build > viteVuePluginOptions like so:

build: {
  viteVuePluginOptions: {
    script: {
      // example: enable experimental props destructuring
      propsDestructure: true
    },

    template: {
      compilerOptions: {
        // example: enable custom/web element tag detection
        isCustomElement: (tag) => tag.startsWith('my-')
      }
    }
  }
}

文件夹别名(Folder aliases)

¥Folder aliases

Quasar 预配置了许多实用的文件夹别名。你可以在项目中的任何地方使用它们，Vite 会解析正确的路径。

¥Quasar comes with a bunch of useful folder aliases pre-configured. You can use them anywhere in your project and Vite will resolve the correct path.

添加文件夹别名(Adding folder aliases)

¥Adding folder aliases

我们将使用 utils 作为示例，它可以用作 import { formatTime } from 'utils/time.js'。有两种方法可以添加文件夹别名：

¥We will use utils as an example, which may be used as import { formatTime } from 'utils/time.js'. There are two ways to add a folder alias:

1. 通过 /quasar.config file > build > alias 属性。这是添加文件夹别名的最简单方法。使用别名的绝对路径。示例：

   ¥Through /quasar.config file > build > alias property. This is the simplest way to add a folder alias. Use an absolute path to your alias. Example:

import { fileURLToPath } from 'node:url'

export default (ctx) => {
  return {
    build: {
      alias: {
        utils: fileURLToPath(new URL('./src/utils', import.meta.url))
      }
    }
  }
}

2. 通过直接扩展 Vite 配置。请勿直接赋值给 viteConf.resolve.alias 以保留内置别名，请改用 Object.assign 或返回包含额外别名的对象。始终使用绝对路径。

   ¥By extending the Vite config directly. Do not assign to viteConf.resolve.alias directly to preserve the built-in aliases, use Object.assign instead or return an Object with your extra aliases. Always use absolute paths.

import { fileURLToPath } from 'node:url'

export default (ctx) => {
  return {
    build: {
      extendViteConf (viteConf, { isServer, isClient }) {
        Object.assign(viteConf.resolve.alias, {
          utils: fileURLToPath(new URL('./src/utils', import.meta.url))
        })
      }
    }
  }
}

与 TypeScript 一起使用(Using with TypeScript)

¥Using with TypeScript

如果你使用的是 TypeScript，你不必再将别名添加到 tsconfig.json 文件（也不必使用 vite-tsconfig-paths 之类的包）。默认情况下，这些由 Quasar CLI 处理。

¥If you are using TypeScript, you DON’T have to also add the aliases to your tsconfig.json file (nor use packages like vite-tsconfig-paths). These are taken care of by the Quasar CLI by default.

PostCSS(PostCSS)

*.vue 文件（以及所有其他样式文件）中的样式默认通过 PostCSS 管道传输，因此你无需为其使用特定的加载器。

¥Styles in *.vue files (and all other style files) are piped through PostCSS by default, so you don’t need to use a specific loader for it.

默认情况下，PostCSS 配置为使用 Autoprefixer。查看 /postcss.config.js，如果需要，你可以进行调整。

¥By default, PostCSS is configured to use Autoprefixer. Take a look at /postcss.config.js where you can tweak it if you need to.