实习随笔-10、process.env前端环境变量配置教程

一、实现原理

采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境

二、具体操作（以vue项目为例）

1、安装依赖

npm install process

2、在根目录新增区分环境的文件

例如：
开发环境：.env.dev
预发布环境：.env.pre
生产环境：.env.product
.dev

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"
/*proxy代理地址*/
VUE_APP_PROXYURL='http://xxx'

.pre

NODE_ENV = 'pre'
VUE_APP_TITLE = 'pre'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"
/*proxy代理地址*/
VUE_APP_PROXYURL='http://xxx'

.prod

NODE_ENV = 'prod'
VUE_APP_TITLE = 'prod'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"

3、设置项目启动时默认的环境

修改package.json文件

package.json
"scripts": {
  "serve": "vue-cli-service serve --mode dev --open",
    "build": "vue-cli-service build --mode production",
    "product": "vue-cli-service build --mode dev --watch",
    "dev": "vue-cli-service build --mode dev",
    "pre": "vue-cli-service build --mode pre",
    "lint": "vue-cli-service lint"
  },

4、查看环境是否配置成功

入口文件main.js打印当前环境，但运行npm run dev(/product/pre)时，就会打印当前环境

console.log(process.env.NODE_NEV)