vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）

一、区分不同环境

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: {
          '^/': '/'
        }

      }
    }
  },