vite打包配置

### Vite 打包配置教程 Vite 是一种现代前端构建工具，支持快速开发和高效的生产环境打包。以下是关于如何通过 `vite.config.js` 配置文件来设置 Vite 进行项目打包的具体方法。 #### 1. 基础配置 在 Vite 中，所有的配置都集中在一个名为 `vite.config.js` 或 `vite.config.ts` 的文件中。以下是一个基础的打包配置示例： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ build: { outDir: 'dist', // 输出目录，默认为 dist assetsInlineLimit: 4096, // 小于此大小的资源会被转为 base64 编码嵌入到最终的 JavaScript 文件中 rollupOptions: { input: './index.html', // 输入入口文件 output: { entryFileNames: 'assets/[name].js', chunkFileNames: 'assets/[name].js', assetFileNames: 'assets/[name].[ext]' } }, minify: 'esbuild', // 使用 esbuild 来压缩代码 (也可以选择 terser) sourcemap: false // 是否生成 source map 文件 }, plugins: [ vue() // Vue 插件用于处理 .vue 单文件组件 ] }); ``` 此部分展示了如何定义输出路径、资产内联限制以及 Rollup 的高级选项[^1]。 #### 2. 多页面应用的支持 如果项目中有多个 HTML 入口，则可以通过调整 `rollupOptions.input` 属性实现多页应用的打包需求。例如： ```javascript rollupOptions: { input: { main: 'index.html', about: 'about/index.html' } } ``` 这样可以分别针对不同的页面进行独立打包[^3]。 #### 3. 生产环境优化 为了提高性能，在生产环境中通常会启用代码分割（Code Splitting）、Tree Shaking 和 Gzip 压缩等功能。这些功能默认由 Vite 提供，但仍可通过自定义进一步增强效果。例如： ```javascript build: { rollupOptions: { treeshake: true, output: { manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0]; } } } }, brotliSize: true // 启用 Brotli 压缩分析 }, optimizeDeps: { include: ['lodash'] // 显式预编译第三方依赖项 } ``` 上述代码片段说明了如何手动控制模块拆分并提升 Tree Shaking 效果[^5]。 #### 4. 自定义插件集成 除了内置的功能外，还可以利用社区提供的各种插件扩展能力。比如使用 `@vitejs/plugin-legacy` 支持旧版浏览器兼容性或者引入其他特定用途的插件如 `unplugin-vue-components` 自动生成组件导入表单等操作[^4]。 ```javascript import legacyPlugin from '@vitejs/plugin-legacy'; export default defineConfig({ plugins: [ legacyPlugin() ], server: { port: 8080 // 设置本地服务端口号 } }); ``` 以上展示了一个简单例子用来演示如何加载额外插件以满足特殊场景下的业务诉求。 --- ###