vite.config.js 打包

<think>好的，我现在需要帮助用户了解如何在vite.config.js中配置打包选项。首先，我得回忆一下Vite的打包配置相关知识，确保自己理解正确。用户可能刚接触Vite，所以需要从基础开始讲起，步骤清晰。 首先，用户的问题是关于打包配置的，我应该先介绍如何创建vite.config.js文件，这是配置的起点。然后，需要提到常用的打包选项，比如指定入口文件、输出目录、资源路径等。这些都是常见的配置项，用户可能会用到。 接下来，代码示例很重要。用户可能需要具体的例子来参考，所以给出一个配置对象的示例，并解释每个字段的作用。比如build.rollupOptions.input用于多入口配置，这对多页面应用很有帮助。另外，资源文件名哈希和公共路径也是常见需求，需要涵盖这些内容。 然后，用户可能不知道如何根据环境变量调整配置。这里需要说明如何区分开发和生产环境，使用defineConfig函数结合process.env.NODE_ENV来动态设置选项。例如，生产环境下启用压缩，而开发环境不启用，这样可以加快构建速度。 另外，可能用户会遇到代理配置的需求，比如跨域问题。虽然主要问题是打包，但代理配置也是vite.config.js的一部分，所以应该简要提及，并给出示例。 最后，确保回答结构清晰，分点说明，让用户容易跟随。同时，生成的相关问题要针对用户可能进一步的需求，比如性能优化、多页面配置、环境变量使用等，帮助用户深入探索。 检查是否有遗漏的重要配置项，比如代码分割、CSS处理等，但根据用户的问题，可能不需要深入这些细节，保持答案简洁。同时，确保引用正确，但用户提供的引用似乎不太相关，所以可能不需要使用它们。最后，确保语言口语化，避免技术术语过多，让用户容易理解。</think># Vite.config.js 打包配置详解 ## 一、基础打包配置 通过配置`build`对象可实现核心打包控制，以下是常用配置项示例： ```javascript import { defineConfig } from 'vite' export default defineConfig({ build: { outDir: 'dist', // 指定输出目录 assetsDir: 'static', // 静态资源存放路径 emptyOutDir: true, // 打包前清空输出目录 rollupOptions: { input: { main: './index.html', // 主入口文件 about: './about.html' // 多页面入口 }, output: { assetFileNames: 'static/[name]-[hash][extname]', // 资源文件命名规则 chunkFileNames: 'js/[name]-[hash].js', // 代码分割文件命名 entryFileNames: 'js/[name]-[hash].js' // 入口文件命名 } } } }) ``` ## 二、进阶配置技巧 ### 1. 文件哈希策略 ```javascript build: { manifest: true, // 生成manifest.json assetsInlineLimit: 4096, // 小于4KB的资源转为base64 cssCodeSplit: true // CSS代码分割 } ``` ### 2. 路径别名配置 ```javascript resolve: { alias: { '@': path.resolve(__dirname, './src'), 'components': path.resolve(__dirname, './src/components') } } ``` ### 3. 环境变量配置 ```javascript define: { __APP_VERSION__: JSON.stringify('1.0.0') } ``` ## 三、生产环境优化 ```javascript export default defineConfig(({ mode }) => ({ build: { minify: mode === 'production' ? 'terser' : false, sourcemap: mode !== 'production', terserOptions: { compress: { drop_console: true // 生产环境移除console } } } })) ``` ## 四、代理配置示例 ```javascript server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } ```