Vue2配置环境变量

代码开发中我们把代码分成开发模式和生产模式，这两种模式的转换我们称职为环境变量。

接下来带着大家如何去配置和使用这个环境变量

Vue2官网：Vue.js

一、首先我们在项目全局目录下创建两个 .env 文件夹，文件分别为 .env.production 生产模式和 .env.development 开发模式

二、在文件里面我们写入对应的https请求地址

NODE_ENV=development
VUE_APP_BASE_URL="http://localhost:8001"

第一行的 NODE_ENV 是告诉系统这是什么环境的文文件夹

这里面其中的 VUE_APP_ 这个是项目固定写死的，不可更改，其后面的名称可以自己随便取，在这里我取的名字为 BASE_URL 

三、来到 package.json 文件夹找到scripts 利用 --mode 来分配我们项目跑起来的指令分别对应的是生产模式开发模式 

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

这边我的定义是跑 dev 为开发模式，跑 pro 为生产模式

四、创建vue.config.js 文件夹，也是创建在项目全局目录，利用 proxy 方法来实现

// vue.config.js
module.exports={
    devServer:{
        proxy:process.env.VUE_APP_BASE_URL
    }
}

这个时候，你只需要将赋值在proxy 的 process.env.VUE_APP_BASE_URL 拿出来放在的发送请请求的路径上即可，然后重点是记得关闭项目重新跑一遍，不然环境变量是不会生效的

console.log( process.env.VUE_APP_BASE_URL )