vue3.0 配置开发环境和生产环境
前言:
开发过程、测试过程、生产过程使用的接口地址不能,还有执行的操作可能也不一样,也就需要实现配置好开发环境、测试环境、生产环境,需要什么环境下的配置直接使用即可
1、在src同级目录也就是根目录下新建文件:.env.development(开发环境)、.env.test(测试环境)、.env.production文件(生产环境)
2、三个配置文件的配置内容如下:
.env.development(开发环境)配置内容
NODE_ENV = 'development' //模式
VUE_APP_MODE = 'development' //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://192.****:8008/api/' //api地址
.env.production文件(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test
.env.production文件(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
3、修改vue.config.js
module.exports = {
// 基本路径,相对路径
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
process.env.outputDir:'dist', // 输出文件目录 outputDir: ,
4、修改package.json文件
"test": "vue-cli-service build --mode test", //打包测试环境
"publish": "vue-cli-service build && vue-cli-service build --mode test", //测试和生产一起打包
5、判断并使用不用的开发环境配置
复制代码
if(process.env.VUE_APP_MODE==='development'){
//开发环境下的执行操作
}else if(process.env.VUE_APP_MODE==='test'){
//测试环境下的执行操作
}else{
//生产环境下的执行操作
}
复制代码
6 如果是js,那么新建API文件夹,在文件夹下新建 request.js 中进行使用
复制代码
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_URL,
// 超时
timeout: 100000
})