VUE配置不同环境变量

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

1.png

看到控制台输出我们配置的结果。

再次重启项目:

npm run serve:prod

查看控制台

2.png

接下来我们运行打包后项目看看是否可行
之前写过用下载serve直接运行打包后的项目，在这我们直接进行操作，打包项目:

npm run build:dev

根目录下生成dist文件，接着执行:

serve dist//默认5000端口

查看控制台

3.png

再次打包并执行：

npm run build:prod
serve dist

查看控制台

4.png

到此我们就配置成功了。