vite【详解】常用配置 vite.config.js / vite.config.ts
vite常用配置
官网： 开始 | Vite 官方中文文档
Vite 配置文件通常是 vite.config.js （使用 CommonJS 语法）或者 vite.config.ts（使用 TypeScript 语法），默认内容为
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
})
解析配置 resolve
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 导入 path
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {// 配置别名alias: {'@': path.resolve(__dirname, './src')}}
})
extensions
导入模块时可省略的文件扩展名列表，默认值是 [‘.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’]。
如果想支持 .vue 文件省略扩展名导入，则配置如下：
resolve: {extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']}
服务器配置 server（含跨域 proxy）
export default defineConfig({server: {// 指定服务器监听的主机名。设置为 '0.0.0.0' 可以让服务器外部可访问，常用于在局域网内共享开发服务器。host: '0.0.0.0',// 指定开发服务器的端口号,常在默认端口被占用时修改port: 3000,// 在开发环境中进行跨域请求，可以配置代理proxy: {// 将以 /api 开头的请求代理到 http://localhost:3000 服务器。'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}},
});
配置插件 plugins
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
});
构建配置 build
build: {// 指定打包输出的目录，默认是 distoutDir: 'my-dist',// 指定是否压缩代码，可取值 'terser'、'esbuild' 或 false。 'terser' 压缩效果更好但速度较慢，'esbuild' 速度快但压缩率稍低。minify: 'esbuild',// 是否生成源映射文件，方便调试生产环境代码。可取值 true、false、'inline'、'hidden' 等, inline 表示生成内联源映射文件sourcemap: 'inline'},
项目根目录 root
index.html 文件所在的位置
export default defineConfig({root: './src',
});
公共基础路径 base
开发或生产环境服务的公共基础路径，默认值为 /。可以是绝对路径或相对路径。
类似于 Webpack 中的 publicPath，如果项目要部署在子路径下，就需要修改该配置。
export default defineConfig({// 项目部署在 https://example.com/my-app/ 下base: '/my-app/',
});
环境配置 define
定义全局常量替换方式，在代码中可以直接使用这些常量。
export default defineConfig({define: {__APP_VERSION__: JSON.stringify('1.0.0'),},
});
代码中使用
console.log(`应用版本号: ${__APP_VERSION__}`);
依赖优化配置
强制预构建的依赖项列表，Vite 会在启动时对这些依赖进行预构建，以提高冷启动速度。
export default defineConfig({optimizeDeps: {include: ['lodash']}
});
css
配置 CSS 相关选项。
css: {preprocessorOptions: {scss: {additionalData: `@import "./src/styles/variables.scss";` // 全局引入 SCSS 变量}}
}