企业官网建设流程全解析

第四节：环境变量，开发、正式环境分开配置

Vite 的环境变量规则：

• .env.development：开发环境pnpm dev读取
• .env.production：打包生产环境pnpm build读取
  变量必须以VITE_开头，代码中通过import.meta.env.VITE_XXX获取。

步骤 1：项目根目录新建两个环境文件（和 vite.config.js 同级，不是 src 下面）

文件 1：.env.development开发环境

# 开发环境 VITE_APP_ENV='development'# 接口基础地址，开发真实后端地址 VITE_API_BASE_URL='/dev-api'# 是否开启mock模拟数据 true开启 mock，false请求真实后端 VITE_USE_MOCK=true

文件 2：.env.production生产环境

# 生产环境 VITE_APP_ENV='production'# 生产后端接口地址 VITE_API_BASE_URL='/prod-api'# 生产环境关闭mock VITE_USE_MOCK=false

注意：文件前面有个点，不要漏写。

步骤 2：测试读取环境变量

修改src/main.js，打印环境变量做验证：

import{createApp}from'vue'import{createPinia}from'pinia'import App from'./App.vue'import router from'./router'constapp=createApp(App)app.use(createPinia())app.use(router)app.mount('#app')// 打印环境变量，用于测试console.log('环境:',import.meta.env.VITE_APP_ENV)console.log('接口地址:',import.meta.env.VITE_API_BASE_URL)console.log('是否使用mock:',import.meta.env.VITE_USE_MOCK)

✅第四节测试

1. 重启项目pnpm dev
2. 打开浏览器 F12 控制台
   看到输出：

环境:development 接口地址:/dev-api 是否使用mock:true

代表开发环境变量读取成功。

顺带简单测试打包环境（可选，不影响继续往下写）

pnpm build

打包后 dist 里面的代码会读取.env.production配置。

⚠️注意：修改.env.*环境变量文件，必须重启 vite 服务才生效。