生产环境构建

当您需要将应用程序部署到生产环境时，只需运行 vite build 命令即可。默认情况下，它使用 <root>/index.html 作为构建入口点，并生成一个适合在静态托管服务上提供的应用程序包。请查看部署静态站点以获取有关常用服务的指南。

浏览器兼容性

生产环境包假设支持现代 JavaScript。默认情况下，Vite 针对支持原生 ES 模块、原生 ESM 动态导入和 import.meta 的浏览器。

Chrome >=87
Firefox >=78
Safari >=14
Edge >=88

您可以通过 build.target 配置选项指定自定义目标，其中最低目标为 es2015。

请注意，默认情况下，Vite 仅处理语法转换，**不包含 polyfill**。您可以查看 https://cdnjs.cloudflare.com/polyfill/，它会根据用户的浏览器 UserAgent 字符串自动生成 polyfill 包。

可以通过 @vitejs/plugin-legacy 支持旧版浏览器，它会自动生成旧版代码块和相应的 ES 语言特性 polyfill。旧版代码块仅在不支持原生 ESM 的浏览器中按需加载。

公共基础路径

相关：资源处理

如果您在嵌套的公共路径下部署项目，只需指定 base 配置选项，所有资源路径都会相应地重写。此选项也可以作为命令行标志指定，例如 vite build --base=/my/public/path/。

JS 导入的资源 URL、CSS url() 引用以及 .html 文件中的资源引用在构建期间都会自动调整以符合此选项。

例外情况是您需要动态连接 URL。在这种情况下，您可以使用全局注入的 import.meta.env.BASE_URL 变量，它将是公共基础路径。请注意，此变量在构建期间会静态替换，因此必须完全按原样出现（即 import.meta.env['BASE_URL'] 将不起作用）。

有关高级基础路径控制，请查看高级基础路径选项。

相对基础路径

如果您事先不知道基础路径，您可以使用 "base": "./" 或 "base": "" 设置相对基础路径。这将使所有生成的 URL 相对每个文件。

使用相对基础路径时对旧版浏览器的支持

相对基础路径需要 import.meta 支持。如果您需要支持不支持 import.meta 的浏览器，可以使用 legacy 插件。

自定义构建

可以通过各种构建配置选项自定义构建。具体来说，您可以通过 build.rollupOptions 直接调整底层的 Rollup 选项

vite.config.js

export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollup.node.org.cn/configuration-options/
    },
  },
})

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

代码分割策略

您可以使用 build.rollupOptions.output.manualChunks 配置代码块的分割方式（请参阅 Rollup 文档）。如果您使用框架，请参阅其文档以配置代码块的分割方式。

加载错误处理

当 Vite 无法加载动态导入时，它会发出 vite:preloadError 事件。event.payload 包含原始导入错误。如果您调用 event.preventDefault()，则不会抛出错误。

window
.addEventListener
('vite:preloadError', (event
) => {
  window
.location
.reload
() // for example, refresh the page
})

当发生新的部署时，托管服务可能会删除先前部署中的资源。因此，在新的部署之前访问过您网站的用户可能会遇到导入错误。此错误发生是因为该用户设备上运行的资源已过时，并且它尝试导入相应的旧代码块，而该代码块已被删除。此事件可用于解决此情况。

文件更改时重建

您可以使用 vite build --watch 启用 Rollup 监视器。或者，您可以通过 build.watch 直接调整底层的 WatcherOptions

vite.config.js

export default defineConfig({
  build: {
    watch: {
      // https://rollup.node.org.cn/configuration-options/#watch
    },
  },
})

启用 --watch 标志后，对 vite.config.js 以及任何要打包的文件的更改都会触发重新构建。

多页面应用程序

假设您有以下源代码结构

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

在开发过程中，只需导航或链接到 /nested/ - 它按预期工作，就像普通的静态文件服务器一样。

在构建过程中，您需要做的就是将多个 .html 文件指定为入口点

vite.config.js

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    rollupOptions
: {
      input
: {
        main
: resolve
(__dirname
, 'index.html'),
        nested
: resolve
(__dirname
, 'nested/index.html'),
      },
    },
  },
})

如果您指定了不同的根目录，请记住，在解析输入路径时，__dirname 仍然是您的 vite.config.js 文件的文件夹。因此，您需要将您的 root 入口添加到 resolve 的参数中。

请注意，对于 HTML 文件，Vite 会忽略 rollupOptions.input 对象中给定的入口名称，而是尊重在 dist 文件夹中生成 HTML 资源时解析的文件 ID。这确保了与开发服务器的工作方式一致的结构。

库模式

当您开发面向浏览器的库时，您很可能大部分时间都在一个测试/演示页面上，该页面导入您实际的库。使用 Vite，您可以将您的 index.html 用于此目的，以获得流畅的开发体验。

当您需要将库打包以供分发时，请使用 build.lib 配置选项。确保还将任何您不想打包到库中的依赖项（例如 vue 或 react）外部化

vite.config.js（单个入口）vite.config.js（多个入口）

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    lib
: {
      entry
: resolve
(__dirname
, 'lib/main.js'),
      name
: 'MyLib',
      // the proper extensions will be added
      fileName
: 'my-lib',
    },
    rollupOptions
: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external
: ['vue'],
      output
: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals
: {
          vue
: 'Vue',
        },
      },
    },
  },
})

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    lib
: {
      entry
: {
        'my-lib': resolve
(__dirname
, 'lib/main.js'),
        secondary
: resolve
(__dirname
, 'lib/secondary.js'),
      },
      name
: 'MyLib',
    },
    rollupOptions
: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external
: ['vue'],
      output
: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals
: {
          vue
: 'Vue',
        },
      },
    },
  },
})

入口文件将包含可由您的包用户导入的导出

lib/main.js

import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }

使用此配置运行 vite build 会使用一个面向库发布的 Rollup 预设，并生成两种捆绑格式

es 和 umd（对于单个入口）
es 和 cjs（对于多个入口）

可以使用 build.lib.formats 选项配置格式。

$ vite build
building for production...
dist/my-lib.js      0.08 kB / gzip: 0.07 kB
dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB

推荐的库 package.json

package.json（单个入口）package.json（多个入口）

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}

CSS 支持

如果您的库导入任何 CSS，它将与构建的 JS 文件一起作为单个 CSS 文件捆绑，例如 dist/my-lib.css。名称默认为 build.lib.fileName，但也可以使用 build.lib.cssFileName 更改。

您可以在 package.json 中导出 CSS 文件，以便用户导入

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    },
    "./style.css": "./dist/my-lib.css"
  }
}

文件扩展名

如果 package.json 不包含 "type": "module"，Vite 将生成不同的文件扩展名以兼容 Node.js。.js 将变为 .mjs，.cjs 将变为 .js。

环境变量

在库模式下，所有 import.meta.env.* 的使用在构建生产环境时都会被静态替换。但是，process.env.* 的使用不会被替换，以便您的库的使用者可以动态更改它。如果这是不可取的，您可以使用 define: { 'process.env.NODE_ENV': '"production"' } 例如静态替换它们，或者使用 esm-env 以更好地兼容打包器和运行时。

高级用法

库模式包含一个简单且有见地的配置，适用于面向浏览器的和 JS 框架库。如果您正在构建非浏览器库，或者需要高级构建流程，您可以直接使用 Rollup 或 esbuild。

高级基础选项

警告

此功能处于实验阶段。提供反馈。

对于高级用例，部署的资产和公共文件可能位于不同的路径中，例如使用不同的缓存策略。用户可以选择在三个不同的路径中进行部署

生成的入口 HTML 文件（可能在 SSR 期间被处理）
生成的哈希资产（JS、CSS 和其他文件类型，如图像）
复制的公共文件

在这种情况下，单个静态 base 不够。Vite 在构建期间提供了对高级基础选项的实验性支持，使用 experimental.renderBuiltUrl。

experimental
: {
  renderBuiltUrl
(filename
, { hostType
 }) {
    if (hostType
 === 'js') {
      return { runtime
: `window.__toCdnUrl(${JSON
.stringify
(filename
)})` }
    } else {
      return { relative
: true }
    }
  },
},

如果哈希资产和公共文件没有一起部署，则可以使用传递给函数的第二个 context 参数中包含的 asset type 来独立定义每个组的选项。

experimental
: {
  renderBuiltUrl
(filename
, { hostId
, hostType
, type
 }) {
    if (type
 === 'public') {
      return 'https://www.domain.com/' + filename

    } else if (path
.extname
(hostId
) === '.js') {
      return {
        runtime
: `window.__assetsPath(${JSON
.stringify
(filename
)})`
      }
    } else {
      return 'https://cdn.domain.com/assets/' + filename

    }
  },
},

请注意，传递的 filename 是一个解码的 URL，如果函数返回一个 URL 字符串，它也应该被解码。Vite 会在渲染 URL 时自动处理编码。如果返回一个包含 runtime 的对象，则应根据需要自己处理编码，因为运行时代码将按原样渲染。

生产环境构建 ​

浏览器兼容性 ​

公共基础路径 ​

相对基础路径 ​

自定义构建 ​

代码分割策略 ​

加载错误处理 ​

文件更改时重建 ​

多页面应用程序 ​

库模式 ​

CSS 支持 ​

高级基础选项 ​

生产环境构建

浏览器兼容性

公共基础路径

相对基础路径

自定义构建

代码分割策略

加载错误处理

文件更改时重建

多页面应用程序

库模式

CSS 支持

高级基础选项