构建系统使用Vite来创建你的网站/应用程序的用户界面（/src文件夹）。如果你不熟悉Vite，也不用担心。开箱后，你不需要对它进行配置，因为它已经设置好了一切。

使用quasar.config.js的用法

如果你需要调整默认的Vite配置，你可以通过编辑/quasar.config.js和配置build > extendViteConf (viteConf)方法来实现。

// quasar.config.js
build: {
  extendViteConf (viteConf, { isServer, isClient }) {
    // do something with viteConf... change it in-place
  }
}

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

检查Vite配置

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

$ 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插件

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

build: {
  vitePlugins: [
    [ '<plugin-name>', { /* plugin options */ } ]
  ]
}

有多种语法支持：

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

// or:

vitePlugins: [
  [ require('<plugin1-name>'), { /* plugin1 options */ } ],
  [ require('<plugin2-name>'), { /* plugin2 options */ } ],
  // ...
]

// 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

vitePlugins: [
  require('<plugin1-name>')({ /* plugin1 options */ }),
  require('<plugin2-name>')({ /* plugin2 options */ })
  // ...
]

vitePlugins: [
  [ require('<plugin1-name>').default, { /* plugin1 options */ } ],
  // ...
]

而且，如果你愿意，你还可以通过/quasar.config.js中的extendViteConf()添加Vite插件。这对于（但不限于）SSR模式特别有用，你希望Vite插件只应用在服务器端或客户端：

build: {
  extendViteConf (viteConf, { isClient, isServer }) {
    viteConf.plugins.push(
      require('<plugin1-name>')({ /* plugin1 options */ }),
      require('<plugin2-name>')({ /* plugin2 options */ })
      // ...
    )
  }
}

此外，别忘了你的/quasar.config.js导出了一个接收ctx作为参数的函数。你可以在整个配置文件中使用它，使设置只适用于某些Quasar模式，或者只适用于dev或prod：

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf, { isClient, isServer }) {
        if (ctx.mode.pwa) {
          viteConf.plugins.push(/* ... */)
        }

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

示例：rollup-plugin-copy

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

// quasar.config.js
...
  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
    ]
  }
...

文件夹别名

Quasar预设了一堆有用的文件夹别名。你可以在你的项目中的任何地方使用它们，Vite会解决正确的路径。

添加文件夹别名

要添加你自己的别名，有两种方法。

1. 编辑/quasar.config.js：

// quasar.config.js
const path = require('path')

module.exports = function (ctx) {
  return {
    build: {
      alias: {
        myalias: path.join(__dirname, './src/somefolder')
      }
    }
  }
}

2. 另外，你可以直接扩展Vite的配置，并与现有的别名列表合并。使用path.join帮助器来解决你想要的别名的路径。

// quasar.config.js
const path = require('path')

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf, { isServer, isClient }) {
        Object.assign(viteConf.resolve.alias, {
          myalias: path.join(__dirname, './src/somefolder')
        })
      }
    }
  }
}

PostCSS

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

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