处理 Vite | Quasar 框架

Quasar CLI with Vite - @quasar/app-vite

处理 Vite

构建系统使用 Vite 来创建您的网站/应用程序的 UI (/src 文件夹)。即使您不熟悉 Vite，也不必担心。开箱即用，您无需进行配置，因为它已经配置了所有内容。

更新 Vite 配置

您可能已经注意到，在您的 Quasar CLI with Vite 项目中不存在 vite.config.js / vite.config.ts 文件。这是因为 Quasar CLI 为您生成了 Vite 配置，因此您无需担心。

如果您需要调整它，可以通过 quasar.config 文件>构建>extendViteConf 这样操作

// use mergeConfig helper to avoid overwriting the default config
const { mergeConfig } = require('vite')

// ...

build: {
  extendViteConf (viteConf, { isServer, isClient }) {
    // example: change the chunk size warning limit
    viteConf.build = mergeConfig(viteConf.build, {
      chunkSizeWarningLimit: 750
    })
    // equivalent of following vite.config.js/vite.config.ts:
    // export default defineConfig({
    //   build: {
    //     chunkSizeWarningLimit: 750
    //   }
    // })
  }
}

请注意，您不需要返回任何内容。 extendViteConf(viteConf) 的参数是 Quasar 为您生成的 Vite 配置对象。您可以添加/删除/替换其中的几乎任何内容，假设您真正知道自己在做什么。但是不要篡改输入和输出文件，也不要篡改由 quasar.config 文件>构建 配置的其他任何选项。

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

检查 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 插件
@quasar/app-vite 1.8+

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

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

您可以在客户端或服务器端禁用插件，这在开发 SSR 应用程序时特别有用

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

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

支持多种语法

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

// or:

vitePlugins: [
  [ require('<plugin1-name>'), { /* plugin1 options */ }, { server: true, client: true } ],
  [ require('<plugin2-name>'), { /* 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

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

提示

您实际上可能会遇到需要作为 require('<package-name>').default 而不是 require('<package-name>') 使用的 Vite 插件。所以

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

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

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

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

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 允许您在构建应用程序时复制文件和文件夹。

// ...
  build: {
  // ...
    vitePlugins: [
      [
        'rollup-plugin-copy', {
          targets: [
            { // Syntax code, check doc in https://npmjs.net.cn/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 插件(@vitejs/plugin-vue) 选项，可以通过 quasar.config 文件>构建>viteVuePluginOptions 这样操作

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

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

文件夹别名

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

别名	解析为
`src`	/src
`app`	/
`components`	/src/components
`layouts`	/src/layouts
`pages`	/src/pages
`assets`	/src/assets
`boot`	/src/boot
`stores`	/src/stores (Pinia stores)

添加文件夹别名

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

通过 /quasar.config 文件>构建>alias 属性。这是添加文件夹别名最简单的方法。使用 Node 的 path.join 帮助程序获取别名的绝对路径。示例

const path = require('node:path')

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

通过直接扩展 Vite 配置。不要直接分配给 viteConf.resolve.alias 以保留内置别名，而是使用 Object.assign。使用 Node 的 path.join 帮助程序解析您要使用的别名的路径。

const path = require('node:path')

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

与 TypeScript 一起使用

如果您使用的是 TypeScript，还需要将您在 quasar.config 文件 中定义的别名添加到 tsconfig.json 文件中。要保留内置别名，您必须在 tsconfig.json 文件中重新定义它们。示例

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"],

      "utils/*": ["src/utils/*"]
    }
  }
}

如果您希望使用 tsconfig.json 作为真相来源并让 Vite 自动从那里获取它们，您可以使用 vite-tsconfig-paths 插件。这样，您就不必在添加别名时同时更新 quasar.config 文件 和 tsconfig.json，避免潜在的错误。按照链接中的说明进行安装，然后将其添加到您的 quasar.config 文件 中。

module.exports = function (ctx) {
  return {
    build: {
      // no longer needed to define aliases here
      // alias: {},

      vitePlugins: [
        ['vite-tsconfig-paths', {
          // projects: ['./tsconfig.json', '../../tsconfig.json'] // if you have multiple tsconfig files (e.g. in a monorepo)
        }]
      ]
    }
  }
}

PostCSS

默认情况下，*.vue 文件（以及所有其他样式文件）中的样式会通过 PostCSS，因此您不需要为它使用特定的加载器。

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

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

1. 简介

2. 更新 Vite 配置

3. 检查 Vite 配置

4. 添加 Vite 插件

4.1. 示例：rollup-plugin-copy

5. Vite Vue 插件选项

6. 文件夹别名

7. PostCSS