前言

上一篇博客，我说了，最近公司是空闲期。基本都是处于浑水摸鱼阶段了，每天打卡上班，打卡下班

但是我是属于那种有点闲不住的人，总想搞点东西玩玩

所以我把公司的项目往 vue-cli4.0 进行了迁移（我原本真的只想迁移到 3.0）

可以参考 vue-cli4.0快速搭建一个项目

迁移的过程可以说还算顺利，也没遇到什么麻烦，就是一些插件版本的升级问题

最近，有人私信问到了我关于 vue-cli4.0 搭建的项目怎么配置环境，所以我就再开一篇博客介绍下

如果是 vue-cli2.0 的项目，环境配置请看我的这篇博客 vue-cli2.0配置环境

一、新建配置文件

跟之前的博客一样，我只拿 开发、测试、预览、生产 四种环境介绍

在项目的根目录下新建 .env.development、.env.test、.env.preview、.env.production 文件分别对应四种环境

.env.xxx 文件代码如下

NODE_ENV="xxx"                                    //环境名
VUE_APP_BASE_URL="http://xxx.xxx.xxx"             //服务器地址
VUE_APP_BASE_API="http://xxx.xxx.xxx:port"        //接口地址
VUE_APP_DIR_NAME="xxx"                            //打包名

个人觉得，NODE_ENV、VUE_APP_BASE_URL 给配置下，其他的变量根据自己的需要进行添加和配置

因为我们的项目部署服务器和接口的服务器是分开的，所以我就多配置了个 VUE_APP_BASE_API 作为接口基础地址

而且我们的不同的环境下，要有不同的打包名，所以又配置了个 VUE_APP_DIR_NAME 作为打包后的文件夹名称

二、配置package.json文件

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",
    "preview": "vue-cli-service build --mode preview",
    "build": "vue-cli-service build --mode production"
},

注意：--mode 后面跟的名字一定要跟 .env.xxx 的名字对应起来才能实现不同的命令用不同的配置文件

所有命令如下

npm run serve        //启动本地服务，默认会访问 .env.development 中的配置
npm run test         //打包测试环境，默认会访问 --mode 后面名字中的配置
npm run preview      //打包预览环境，默认会访问 --mode 后面名字中的配置
npm run build        //打包生成环境，默认会访问 --mode 后面名字中的配置

三、封装axios

一般来说，我们的项目肯定都做了请求拦截和响应拦截，那么就要封装 axios，在封装的时候 baseUrl 属性取配置中的值，就做到了接口环境的区分了

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, //取.env.xxx中的配置
  timeout: 0
});

四、配置vue.config.js文件

//输出文件目录
outputDir: process.env.VUE_APP_DIR_NAME,

同样的，vue 的其他配置我们都会在项目根目录创建一个 vue.config.js 文件，那么在 outputDir 属性取配置中的值，就可以做到不同环境打包文件名字不同的区分了

结束语

好了，这样就完成了项目环境的配置了，当然网上也有其他的教程，适合自己的才是最好的！

有问题欢迎评论~