vue配置多个环境变量ENV【收藏版】

vue配置多个环境变量

1. 创建环境变量文件

在你的Vue项目根目录下，你可以创建以下环境变量文件：

.env：所有环境都会加载的通用变量。
.env.local：本地覆盖，不会被git跟踪。
.env.[mode]：只有指定模式才会加载的变量文件，如.env.development（开发环境）、.env.production（生产环境）、.env.test（测试环境）等。

2. 配置环境变量

假设我们想要配置不同环境的API访问地址，可以在相应的.env文件中添加如下配置：

.env.development（开发环境）

VUE_APP_API_BASE_URL=http://dev.api.example.com

.env.production（生产环境）

VUE_APP_API_BASE_URL=https://prod.api.example.com

注意：环境变量必须以VUE_APP_开头，这样它们才会被Webpack的DefinePlugin处理，并可以在项目中以process.env.VUE_APP_XXX的形式访问。

3. 在Vue项目中使用这些环境变量

在你的Vue组件、服务或任何JavaScript文件中，你可以通过process.env.VUE_APP_API_BASE_URL来访问这个环境变量。
例如，
在axios的配置文件中：

// src/plugins/axios.js
import axios from 'axios';

const http = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000,
  // 其他配置...
});

export default http;

4.打包与部署

当你运行npm run serve时，Vue CLI会加载.env.development中的环境变量（如果存在）。

当你运行npm run build或npm run build --mode production时，Vue CLI会加载.env.production中的环境变量（如果存在），并使用这些变量来打包你的应用。