一、环境变量干啥用的

我们学习它肯定就是要用它，说个最常用的例子吧，我们请求的地址在开发线、测试线、和正式线中，肯定是不一样的所以每次打包之前去改就显得很麻烦，它就是用来干这个的帮我们解决这个问题。废话少说，立马开干

二、配置环境变量

首先我们需要在项目根目录下创建你所需要的环境变量名字为.env.xxxx，前面.env是固定的后面可以自定义，这里我定义了三个

• .env.development 开发
• .env.test 测试
• .env.production 生产

三、定义变量

只有VUE_APP开头的变量和NODE_ENV和BASE_URL才有效哦，所以我定义了如下变量；

.env.development文件
NODE_ENV=development
VUE_APP_BASE_URL="http://dev"

.env.test文件
NODE_ENV=test
VUE_APP_BASE_URL="https://test"

.env.production文件
NODE_ENV=production
VUE_APP_BASE_URL="https://prod"

四、使用

我们定义好了变量在哪里使用呢，在js文件中，这样来使用，这里我们已axios配置举个例子

import axios from "axios";
const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, //这就是我们定义好的变量啦
    timeout: 5000
})
export default request;

然后在我们的package.json里面添加如下代码

"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "pro": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test"
  },

然后我们只需要运行npm run build:test就可以轻松打包test模式的变量啦，build的话默认会使用production环境变量。