vue2和3分别如何在脚手架环境中设置环境变量?

Vue2 和 Vue3 配置环境变量的核心差异在于脚手架工具：Vue2 仅基于@vue/cli（Vue CLI），Vue3 则分为@vue/cli版和Vite版（Vite 是 Vue3 官方推荐的新一代脚手架）。以下是分场景的详细配置方法，包含文件规范、配置规则、使用方式和自定义环境。

一、Vue2（基于 Vue CLI）

Vue2 脚手架由@vue/cli构建，环境变量遵循 Vue CLI 官方规范，核心是「文件命名+前缀限制」。

1. 环境文件命名规范（必须放在项目根目录）

2. 配置规则

• 环境变量必须以VUE_APP_为前缀（Vue CLI 强制要求，非前缀变量不会被打包）；
• 支持简单的键值对，不支持嵌套对象；
• 注释用#开头。

示例：创建 .env.development（开发环境）

# 开发环境接口地址 VUE_APP_BASE_URL = http://localhost:3000/api # 开发环境标识 VUE_APP_ENV = development # 功能开关 VUE_APP_DEBUG = true

示例：创建 .env.production（生产环境）

# 生产环境接口地址 VUE_APP_BASE_URL = https://api.xxx.com # 生产环境标识 VUE_APP_ENV = production # 功能开关 VUE_APP_DEBUG = false

3. 环境变量的使用方式

（1）在 Vue 组件/JS 文件中使用

// 组件中exportdefault{mounted(){console.log(process.env.VUE_APP_BASE_URL);// 输出对应环境的接口地址console.log(process.env.VUE_APP_DEBUG);// 注意：值是字符串，需手动转布尔（如 JSON.parse）}}

（2）在 vue.config.js 中使用

Vue CLI 配置文件中可直接通过process.env读取：

// vue.config.jsmodule.exports={devServer:{proxy:{'/api':{target:process.env.VUE_APP_BASE_URL,// 读取环境变量changeOrigin:true,pathRewrite:{'^/api':''}}}}}

4. 自定义环境（如测试环境）

步骤1：创建.env.test文件

VUE_APP_BASE_URL = https://test-api.xxx.com VUE_APP_ENV = test

步骤2：修改package.json的启动脚本

{"scripts":{"serve":"vue-cli-service serve",// 默认开发环境"serve:test":"vue-cli-service serve --mode test",// 测试环境"build":"vue-cli-service build",// 默认生产环境"build:test":"vue-cli-service build --mode test"// 打包测试环境}}

步骤3：启动/打包测试环境

npmrun serve:test# 启动测试环境npmrun build:test# 打包测试环境

二、Vue3（分 2 种脚手架）

Vue3 支持两种脚手架：@vue/cli（和 Vue2 兼容）、Vite（官方推荐，新一代工具），两者环境变量配置差异较大。

场景1：Vue3 + Vue CLI（和 Vue2 几乎一致）

• 环境文件命名、前缀（VUE_APP_）、使用方式（process.env）完全和 Vue2 一致；
• 唯一差异：Vue3 组件中可在<script setup>中直接使用process.env：

  <script setup> console.log(process.env.VUE_APP_BASE_URL); </script>

场景2：Vue3 + Vite（重点）

Vite 是 Vue3 推荐的脚手架，环境变量规则和 Vue CLI 不同，核心是「前缀VITE_+import.meta.env读取」。

1. 环境文件命名规范（项目根目录）

2. 配置规则

• 变量必须以VITE_为前缀（Vite 强制要求，可通过envPrefix自定义）；
• 支持多行字符串、注释（#开头）；
• 无需安装额外依赖，Vite 内置环境变量解析。

示例：.env.development

# 开发环境接口地址 VITE_BASE_URL = http://localhost:3000/api # 开发环境名称 VITE_APP_ENV = development # 多行字符串示例 VITE_APP_DESC = > 这是多行描述 适用于长文本配置

示例：.env.production

VITE_BASE_URL = https://api.xxx.com VITE_APP_ENV = production

3. 环境变量的使用方式

（1）在 Vue 组件/JS 文件中使用

Vite 不支持process.env（浏览器环境无process对象），需用import.meta.env：

<!-- <script setup> 语法 --> <script setup> // 直接读取 console.log(import.meta.env.VITE_BASE_URL); // 布尔值转换（Vite 环境变量值均为字符串） const isDebug = import.meta.env.VITE_APP_DEBUG === 'true'; </script> <!-- 选项式 API --> <script> export default { mounted() { console.log(import.meta.env.VITE_BASE_URL); } } </script>

（2）在 vite.config.js 中使用

Vite 配置文件中需通过loadEnv手动加载环境变量（因为配置文件运行在 Node 环境，无法直接用import.meta.env）：

// vite.config.jsimport{defineConfig,loadEnv}from'vite';importvuefrom'@vitejs/plugin-vue';exportdefaultdefineConfig(({mode})=>{// 加载环境变量：参数1=环境模式，参数2=项目根目录，参数3=前缀（默认VITE_）constenv=loadEnv(mode,process.cwd(),'VITE_');return{plugins:[vue()],server:{proxy:{'/api':{target:env.VITE_BASE_URL,// 使用加载的环境变量changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}}}});

4. 自定义环境（如测试环境）

步骤1：创建.env.test文件

VITE_BASE_URL = https://test-api.xxx.com VITE_APP_ENV = test

步骤2：修改package.json脚本

{"scripts":{"dev":"vite",// 默认开发环境"dev:test":"vite --mode test",// 测试环境开发"build":"vite build",// 默认生产环境打包"build:test":"vite build --mode test"// 测试环境打包}}

步骤3：启动/打包

npmrun dev:test# 启动测试环境npmrun build:test# 打包测试环境

5. 自定义环境变量前缀（可选）

若不想用VITE_前缀，可在vite.config.js中配置envPrefix：

exportdefaultdefineConfig({envPrefix:'MY_APP_',// 自定义前缀为 MY_APP_})

此时环境变量需命名为MY_APP_BASE_URL，读取时用import.meta.env.MY_APP_BASE_URL。

三、通用注意事项（Vue2/Vue3 均适用）

1. 变量类型：所有环境变量的值最终都是字符串，布尔值/数字需手动转换（如JSON.parse(import.meta.env.VITE_DEBUG)）；
2. 优先级：本地私有文件（.env.xxx.local）> 特定环境文件（.env.development）> 通用文件（.env）；
3. 敏感信息：前端环境变量会被打包到代码中，不要存放密钥、token 等敏感信息（敏感信息需通过后端接口转发）；
4. 重启服务：修改环境文件后，需重启脚手架服务（npm run serve/dev）才能生效；
5. git 忽略：.local后缀的文件会被默认加入.gitignore，适合存放本地调试的配置（如.env.development.local）。

总结