构建生产版本

    用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 的。作为参考，vite 使用这个 browserslist 作为查询标准：

    你也可以通过 指定构建目标，最低支持 es2015。

    请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。你可以前往 Polyfill.io 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务。

    传统浏览器可以通过插件 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

    公共基础路径

    • 相关内容：

    如果你需要在嵌套的公共路径下部署项目，只需指定 base 配置项，然后所有资源的路径都将据此配置重写。这个选项也可以通过命令行参数指定，例如 vite build --base=/my/public/path/。

    当然，情况也有例外，当访问过程中需要使用动态连接的 url 时，可以使用全局注入的 import.meta.env.BASE_URL 变量，它的值为公共基础路径。注意，这个变量在构建时会被静态替换，因此，它必须按 import.meta.env.BASE_URL 的原样出现（例如 import.meta.env['BASE_URL'] 是无效的）

    构建过程可以通过多种 来自定义构建。具体来说，你可以通过 build.rollupOptions 直接调整底层的 Rollup 选项：

    1. // vite.config.js
    2. module.exports = defineConfig({
    3.   build: {
    4.     rollupOptions: {
    5.       // https://rollupjs.org/guide/en/#big-list-of-options
    6.     }
    7.   }
    8. })

    例如，你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。

    文件变化时重新构建

    你可以使用 vite build --watch 来启用 rollup 的监听器。或者，你可以直接通过 build.watch 调整底层的 WatcherOptions 选项：

    假设你有下面这样的项目文件结构

    1. ├── package.json
    2. ├── vite.config.js
    3. ├── index.html
    4. └── nested
    5.     ├── index.html
    6.     └── nested.js

    在构建过程中，你只需指定多个 .html 文件作为入口点即可：

    如果你指定了另一个根目录，请记住，在解析输入路径时，__dirname 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 root 的路径添加到 resolve 的参数中。

    库模式

    当你开发面向浏览器的库时，你可能会将大部分时间花在该库的测试/演示页面上。在 Vite 中你可以使用 index.html 获得如丝般顺滑的开发体验。

    当这个库要进行发布构建时，请使用 build.lib 配置项，以确保将那些你不想打包进库的依赖进行外部化处理，例如 vue 或 react：

    1. // vite.config.js
    2. const path = require('path')
    3. const { defineConfig } = require('vite')
    5. module.exports = defineConfig({
    6.   build: {
    7.     lib: {
    8.       entry: path.resolve(__dirname, 'lib/main.js'),
    9.       name: 'MyLib',
    10.       fileName: (format) => `my-lib.${format}.js`
    11.     },
    12.     rollupOptions: {
    13.       // 确保外部化处理那些你不想打包进库的依赖
    15.       output: {
    16.         globals: {
    17.           vue: 'Vue'
    18.         }
    19.       }
    20.     }
    21.   }
    22. })

    使用如上配置运行 vite build 时，将会使用一套面向库的 Rollup 预设，并且将为该库提供两种构建格式：es 和 umd (可在 build.lib 中配置)：

    1. {
    2.   "name": "my-lib",
    3.   "files": ["dist"],
    4.   "main": "./dist/my-lib.umd.js",
    5.   "module": "./dist/my-lib.es.js",
    6.   "exports": {
    7.     ".": {
    8.       "import": "./dist/my-lib.es.js",
    9.       "require": "./dist/my-lib.umd.js"
    10.     }
    11.   }