vue.js 项目使用 vite 配置多环境构建，核心是通过 --mode 指定模式并配合以 vite_ 开头的环境变量文件实现隔离；vite 原生支持，无需插件，变量仅 vite_ 开头者注入客户端，加载优先级为 .env.[mode].local > .env.[mode] > .env.local > .env。
Vue.js 项目使用 Vite 配置多环境构建，核心是通过 --mode 指定运行/构建模式，配合以 VITE_ 开头的环境变量文件实现配置隔离。它不依赖手动改代码，也不需要插件，Vite 原生支持，稳定且轻量。
环境变量命名与可见性规则
Vite 默认只将 以 VITE_ 开头 的变量注入到客户端代码中，可通过 import.meta.env.VITE_XXX 直接访问。这是强制安全机制：
- ✅
VITE_API_BASE_URL=https://api.example.com—— 可在组件、API 请求中直接使用 - ❌
DB_PASSWORD=123456或SECRET_KEY=xxx—— 不会暴露，不会打包进前端产物
如需自定义前缀（例如统一用 APP_），可在 vite.config.ts 中配置：
export default defineConfig({<br> envPrefix: 'APP_',<br> // ...<br>})
环境文件结构与加载优先级
在项目根目录（与 package.json 同级）创建以下文件：
-
.env：所有环境共用，基础默认值（如VITE_APP_TITLE） -
.env.development：开发环境（vite dev默认加载） -
.env.test：测试环境（需显式指定--mode test） -
.env.staging：预发布环境 -
.env.production：生产环境（vite build默认加载）
加载顺序有优先级：.env.[mode].local > .env.[mode] > .env.local > .env。同名变量会被高优先级文件覆盖。
package.json 脚本定义不同模式
在 scripts 中添加带 --mode 的命令，让启动和构建明确对应环境：
"scripts": {<br> "dev": "vite --mode development",<br> "dev:test": "vite --mode test",<br> "dev:staging": "vite --mode staging",<br> "build": "vite build --mode production",<br> "build:test": "vite build --mode test",<br> "build:staging": "vite build --mode staging"<br>}
执行 npm run dev:test 时，Vite 自动加载 .env.test 并将 import.meta.env.MODE === 'test'。
vite.config.ts 中动态读取与代理配置
利用 loadEnv 在构建配置中读取当前模式变量，用于动态设置代理、输出路径等：
import { defineConfig, loadEnv } from 'vite'<br>export default defineConfig(({ mode }) => {<br> const env = loadEnv(mode, process.cwd())<br> return {<br> build: {<br> outDir: mode === 'production' ? 'dist' : `dist/${mode}`,<br> sourcemap: mode !== 'production'<br> },<br> server: {<br> proxy: {<br> '/api': {<br> target: env.VITE_API_BASE_URL,<br> changeOrigin: true,<br> rewrite: (path) => path.replace(/^\/api/, '')<br> }<br> }<br> }<br> }<br>)
这样，开发时请求 /api/user 会自动代理到 .env.test 里定义的地址，无需修改 axios baseURL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
