导航菜单
首页 >  开始 Vite 官方中文文档  > 构建生产版本

构建生产版本

构建生产版本 ​

当需要将应用部署到生产环境时,只需运行 vite build 命令。默认情况下,它使用 /index.html 作为其构建入口点,并生成能够静态部署的应用程序包。请查阅 部署静态站点 获取常见服务的部署指引。

浏览器兼容性 ​

用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下,Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器:

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

你也可以通过 build.target 配置项 指定构建目标,最低支持 es2015。

请注意,默认情况下 Vite 只处理语法转译,且 不包含任何 polyfill。你可以访问 https://cdnjs.cloudflare.com/polyfill/ ,这个网站可以根据用户的浏览器 UserAgent 字符串自动生成 polyfill 包。

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

公共基础路径 ​相关内容:静态资源处理

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

由 JS 引入的资源 URL,CSS 中的 url() 引用以及 .html 文件中引用的资源在构建过程中都会自动调整,以适配此选项。

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

若想要进一步控制基础路径,请查看 高级 base 选项.

自定义构建 ​

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

jsexport default defineConfig({ build: {rollupOptions: { // https://rollupjs.org/configuration-options/}, },})

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

产物分块策略 ​

你可以通过配置 build.rollupOptions.output.manualChunks 来自定义 chunk 分割策略(查看 Rollup 相应文档)。如果你使用的是一个框架,那么请参考他们的文档来了解如何配置分割 chunk。

处理加载报错 ​

当 Vite 加载动态导入失败时,会触发 vite:preloadError 事件。event.payload 包含原始的导入错误信息。如果调用 event.preventDefault(),则不会抛出错误。

jswindow.addEventListener('vite:preloadError', (event) => { window.location.reload() // 例如,刷新页面})

当重新部署时,托管服务可能会删除之前部署的资源。因此,之前访问过您站点的用户可能会遇到导入错误。这种错误发生的原因是用户设备上运行的资源过时,并尝试导入相应的旧代码块,而这些代码块已经被删除。这个事件对于解决这种情况会很有帮助。

文件变化时重新构建 ​

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

js// vite.config.jsexport default defineConfig({ build: {watch: { // https://rollupjs.org/configuration-options/#watch}, },})

当启用 --watch 标志时,对 vite.config.js 的改动,以及任何要打包的文件,都将触发重新构建。

多页面应用模式 ​

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

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

在开发过程中,简单地导航或

相关推荐: