一、区分不同环境
1.在根目录下新建3个文件（.env.development、.env.production、.env.uat）文件类型为.txt文件
.env.development
VUE_APP_BASE_API=开发环境地址
VUE_APP_ENV=development
.env.production
NODE_ENV=production
VUE_APP_BASE_API=生产环境地址
VUE_APP_ENV=production
.env.uat
NODE_ENV=production
VUE_APP_BASE_API=uat环境地址
VUE_APP_ENV=uat
二、设置baseURL
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, //主要是设置baseURL的地址，不同项目结构可能修改的地方不同
timeout: 600000 // request timeout
})
三、判断不同环境
这一部分有的同学可能用到，有的可能不需要
//判断不同环境
if(process.env.VUE_APP_ENV === 'production'){
这里是生产环境
}else if(process.env.VUE_APP_ENV === 'uat'){
这里是uat环境
}else if(process.env.VUE_APP_ENV === 'development'){
这里是开发环境
}
四、配置打包命令
在package.json内配置
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"uat": "vue-cli-service build --mode uat"
},
五、根据不同命令打包到不同文件夹
在vue.config.js内配置outputDir
module.exports = {
publicPath: './',
// outputDir: 'dist',
outputDir: process.env.VUE_APP_ENV === 'uat'?'uat':'dist',//配置这个地方
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
host: '0.0.0.0',
overlay: {
warnings: false,
errors: false
},
proxy: {
'/': {
target: 'http://39.105.96.8:8083',
changeOrigin: true,
ws: false,
pathRewrite: {
'^/': '/'
}
}
}
},
参考文章：vue-cli3配置不同环境下的baseUrl和不同环境下的一些参数【生产环境、开发环境、测试环境】
本文章主要是添加了将最后文件打包到不同的文件夹
