震惊!超详细的process.env前端环境变量配置教程

前端环境变量配置前端

 

1、为何要配置环境变量vue

在公司,一个项目通常会有开发版本、测试版本、灰度版本和线上版本,每一个版本会对应相同或不一样的数据库、API地址。为了方便管理,咱们一般作成配置文件的形式,根据不一样的环境,加载不一样的文件。若是手动修改代码中加载配置文件的路径也能够,可是太麻烦,最重要的是很low(无形装逼,最为致命)。node

2、实现原理vue-cli

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

3、具体操做(以vue项目为例)npm

一、安装依赖json

npm install process

 

二、在根目录新增五个文件(根据自身状况增减), .env 和 .env.dev 和 .env.pre和 .env.prod和 .env.sit和 .env.uat,分别为默认配置、本地开发配置、灰度配置、生产配置、测试配置一、测试配置2,(ps: VUE_APP是统一标志,后面的拓展名能够任取)测试

  .envui

VUE_APP_TITLE='dev'

  .devspa

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

  .prod

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

 

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

只须要在项目启动命令后面修改须要的环境就行,例如我这是npm run dev,把--mode dev改为--mode uat就好了
package.json

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode dev",
    "lint": "vue-cli-service lint",
    "build-sit": "vue-cli-service build --mode sit",
    "build-uat": "vue-cli-service build --mode uat",
    "build-pre": "vue-cli-service build --mode pre",
    "build-prod": "vue-cli-service build --mode prod"
  },

 

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

在main.js里打印当前环境,输出就成功了

console.log(process.env.NODE_NEV)

若是读后有收获能够给做者加个煎蛋:

相关文章
相关标签/搜索