Vue中多环境变量配置

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是多环境变量？

我们在vue项目开发中，项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量。

环境一般分为开发环境，测试环境，生产环境

二、作用

一个项目的完整流程，包含开发阶段、打包阶段、测试阶段，与之对应的则是不同的环境，因为每个环境的接口域名、webpack 配置都是不同的，所以在打包构建时，我们需要区分这些环境，这时就用到了环境变量。

三、在配置多环境变量前，需要了解的知识点

.env文件是环境配置，会在项目运行时被加载，且只会被加载一次,单独的环境配置文件会覆盖全局环境配置的相同属性
.env全局环境配置，.env.development开发环境配置，.env.production生产环境配置，.env.testing测试环境配置
.env文件中的默认属性有NODE_ENV和VUE_APP_ENV
添加的属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX
可以通过process.env在任何地方访问到当前环境配置属性

四、配置流程

首先是通过在根目录下创建.env.*（配置文件）文件，development 本地开发环境配置、test测试环境配置、
production 正式环境配置。我们可以在封装的接口api文件夹中定义baseUrl文件，来区分不同环境下对应的
不同的基本路径。

第一步

首先我们在项目跟目录下找到package.json文件，在scripts中配置serve test build，通过 --mode xxx 来执行不同环境

"scripts": {
    "serve": "vue-cli-service serve --open", // 开发环境
    "build": "vue-cli-service build", // 生产环境
    "test": "vue-cli-service build --mode testing" // 测试环境
  },

我们根据不同的启动方式来启用不同的域。

第二步

我们在根目录下创建3个文件分别是
.env.development // 开发环境
.env.production // 生产环境
env.testing // 测试环境

在这三个文件中分别写入：

NODE_ENV= "development"

NODE_ENV= "production"

NODE_ENV= "testing"

第三步

在根目录下的src文件中，新建一个config文件夹，并创建三个对应文件，专门用来保存我们的环境变量

在config中创建对应的文件是为了后期修改起来方便，不需要重启项目，符合开发习惯。

第四步

在三个对应的文件中分别写入：

//开发环境配置
module.exports = {
    baseUrl : 'https://developmentssssddddd.com'
}


//正式环境配置
module.exports = {
    baseUrl : 'https://production.com'
}


//测试环境配置
module.exports = {
    baseUrl : 'https://testing.com'
}

第五步

根据需要的环境，在封装的axios中通过解构赋值的方式导入，放在baseURL中就可以使用。

import axios from 'axios'
const {baseUrl }= require('../config/env.' + process.env.NODE_ENV)
const instance = axios.create({
    baseURL: baseUrl,
    timeout: 1000,
});

注意

如果测试环境时，需要额外配置一个js文件
在根目录下创建vue.config.js文件，然后写入：

module.exports = {
  publicPath: "./"
  // 路径都换为 ./