vue-cli3.0项目环境
开发、测试、预览、生产 四种环境介绍
一、新建配置文件
在项目的根目录下新建 .env.development、.env.test、.env.preview、.env.production 文件分别对应四种环境
image.png
.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 属性取配置中的值，就可以做到不同环境打包文件名字不同的区分了
转载自：https://blog.csdn.net/liyunkun888/article/details/103322625
