vite.config.ts 具体配置信息

### Vite 配置文件 `vite.config.ts` 的详细配置说明 #### 一、基础配置 Vite 的核心配置文件允许开发者通过 TypeScript 或 JavaScript 来定义项目的运行时行为。以下是常见的配置项及其用途： 1. **mode**: 指定当前的工作模式，可以是开发环境（development）、生产环境（production）或其他自定义模式[^1]。 2. **root**: 定义项目根目录的位置，默认为调用命令所在的目录。 3. **base**: 设置部署的基础路径，当需要将应用托管于子路径下时非常有用。例如 `/my-app/` 表示所有资源都位于该路径之下[^1]。 ```typescript import { defineConfig } from 'vite'; export default defineConfig({ mode: process.env.NODE_ENV, root: './', base: '/my-app/', }); ``` --- #### 二、开发服务器配置 (server) 这部分涉及本地开发期间的行为调整。 1. **port**: 设定启动的服务监听端口号。 2. **open**: 是否自动打开浏览器访问地址[^1]。 3. **https**: 启用 HTTPS 协议支持。 4. **proxy**: API 请求转发代理规则设置[^1]。 ```typescript server: { port: 8080, open: true, https: false, proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, rewrite: path => path.replace(/^\/api/, ''), }, }, }, ``` --- #### 三、构建配置 (build) 针对最终产物生成阶段的各项参数调节。 1. **outDir**: 输出文件夹的名字，默认值为 dist。 2. **assetsDir**: 静态资产存放子目录名称[^1]。 3. **rollupOptions**: 更加细粒度地定制 Rollup 打包策略。 ```typescript build: { outDir: 'dist', assetsDir: 'static', rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0]; } }, }, }, }, ``` --- #### 四、插件配置 (plugins) 引入第三方或者自制插件扩展功能集合。 ```typescript import vuePlugin from '@vitejs/plugin-vue'; import legacy from '@vitejs/plugin-legacy'; const plugins = [ vuePlugin(), legacy({ targets: ['defaults', 'not IE 11'] }), ]; // 将 plugins 数组传递给 main config object ``` --- #### 五、依赖优化 (optimizeDeps) 提升首次加载速度的关键部分之一就是预构建外部库。 1. **include/exclude**: 明确指出哪些模块应当被纳入或排除在外进行提前处理。 ```typescript optimizeDeps: { include: ['lodash'], exclude: ['moment'], }, ``` --- #### 六、环境变量配置 (env) 借助 dotenv 库读取 .env 文件内容并暴露给客户端脚本使用。 ```typescript define: { __APP_VERSION__: JSON.stringify(process.env.npm_package_version), }, ``` --- #### 七、CSS 配置 (css) 对于样式表相关操作提供了丰富的选项集。 1. **preprocessorOptions**: 对 SCSS/SASS/Less/Stylus 等预处理器给予额外指令。 ```typescript css: { preprocessorOptions: { scss: { additionalData: `$injectedColor: red;`, }, }, }, ``` --- #### 八、JSON 配置 (json) 控制如何对待 JSON 导入请求。 ```typescript json: { namedExports: true, // 默认false；如果设为true，则允许命名导出 }, ``` --- #### 九、静态资源处理 (assetsInclude) 声明应视为静态资源而非 ES Module 的文件类型列表。 ```typescript assetsInclude: ['**/*.gltf'], // 添加 glTF 模型作为静态资源 ``` --- #### 十、日志配置 (logLevel) 调整 CLI 日志级别以满足调试需求。 ```typescript logLevel: 'info' | 'warn' | 'error' | 'silent' ``` --- #### 十一、其他配置 还有许多其他的个性化字段可供探索，比如 esbuild、worker 等等。 --- ### 示例完整代码片段 ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ server: { port: 3000, open: true, }, build: { outDir: 'dist', assetsDir: 'static', }, css: { preprocessorOptions: { scss: { additionalData: `$color-primary: blue;`, }, }, }, optimizeDeps: { include: ['axios'], }, plugins: [vue()], }); ```