在项目开发中我们经常会遇到对于一些公共的变量在开发环境和线上环境是不同的，就好比后台提供给我们的接口也是分测试和线上的。如果我们开发时写一套，然后到上线时再去修改容易出现很多遗漏导致很多没必要的bug。以VUE为例接下来我们来配置不同环境下的变量。

我在本地创建了一个hello-world的项目

vue create hello-world;
cd hello-world
npm run serve
项目内容没必要做什么修改我们主要是配置一些文件
创建配置文件
在项目的根目录下我们创建两个文件

.env.dev  //用来配置开发环境变量

.env.prod  //用来配置线上环境变量
.env.dev变量配置
开发环境下的环境变量

NODE_ENV = development

VUE_APP_URL = https://www.development.com.cn //具体变量以实际项目为准
.env.prod变量配置
生产环境下的环境变量

NODE_ENV = production

VUE_APP_URL = https://www.production.com.cn //具体变量以实际项目为准

如果变量较多自行添加，需要注意的是vue自定义变量时必须以"VUE_APP"开头才行。
修改package.json文件中的scripts
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
我们添加几个命令
"scripts": {
    "serve": "vue-cli-service serve",
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:prod": "vue-cli-service serve --mode prod",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"
注意--mode后面的变量与文件.env.后面dev/prod相对应要一致

为了看出效果我们在sec/main.js中加入输出
//我们在 .env.dev/.env.prod 文件中配置的变量
console.log("目前环境" + process.env.NODE_ENV);
console.log("环境域名变量" + process.env.VUE_APP_URL);
此时用我们配置的命令重启项目:
npm run serve:dev