###一、为什么要配置环境变量 在公司，一个项目一般会有开发版本、测试版本、灰度版本和线上版本，每个版本会对应相同或不同的数据库、API地址。为了方便管理，我们通常做成配置文件的形式，根据不同的环境，加载不同的文件。如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low（无形装逼，最为致命）。 ###二、实现原理 采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境 ###三、具体操作（以vue项目为例） 1、安装依赖 ``` npm install process ``` 2、在根目录新增五个文件(根据自身情况增减)， .env 和 .env.dev 和 .env.pre和 .env.prod和 .env.sit和 .env.uat，分别为默认配置、本地开发配置、灰度配置、生产配置、测试配置1、测试配置2，(ps: VUE_APP是统一标志，后面的拓展名可以任取) 　　.env ``` VUE_APP_TITLE='dev' ``` 　　.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' ``` 　　.prod ``` NODE_ENV = production VUE_APP_TITLE = 'prod' /*请求接口地址*/ VUE_APP_INTERFACE_URL="https://xxx" /*首页地址*/ VUE_APP_URL="http://xxx" ``` 3、设置项目启动时默认的环境 只需要在项目启动命令后面修改需要的环境就行，例如我这是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" }, ``` 4、查看环境是否配置成功 在main.js里打印当前环境，输出就成功了 ``` console.log(process.env.NODE_NEV) ``` --- https://www.cnblogs.com/liuxuande/p/13968612.html

###一、为什么要配置环境变量 在公司，一个项目一般会有开发版本、测试版本、灰度版本和线上版本，每个版本会对应相同或不同的数据库、API地址。为了方便管理，我们通常做成配置文件的形式，根据不同的环境，加载不同的文件。如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low（无形装逼，最为致命）。 ###二、实现原理 采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境 ###三、具体操作（以vue项目为例） 1、安装依赖 ``` npm install process ``` 2、在根目录新增五个文件(根据自身情况增减)， .env 和 .env.dev 和 .env.pre和 .env.prod和 .env.sit和 .env.uat，分别为默认配置、本地开发配置、灰度配置、生产配置、测试配置1、测试配置2，(ps: VUE_APP是统一标志，后面的拓展名可以任取) 　　.env ``` VUE_APP_TITLE='dev' ``` 　　.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' ``` 　　.prod ``` NODE_ENV = production VUE_APP_TITLE = 'prod' /*请求接口地址*/ VUE_APP_INTERFACE_URL="https://xxx" /*首页地址*/ VUE_APP_URL="http://xxx" ``` 3、设置项目启动时默认的环境 只需要在项目启动命令后面修改需要的环境就行，例如我这是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" }, ``` 4、查看环境是否配置成功 在main.js里打印当前环境，输出就成功了 ``` console.log(process.env.NODE_NEV) ``` --- https://www.cnblogs.com/liuxuande/p/13968612.html