vue-cli3.0项目环境

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