Vue 2.0 添加多环境打包配置(vue-cli4.5)

1.创建vue.config.js 文件

module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: process.env.outputDir,
  lintOnSave: false,
  devServer: {
    proxy: {
      '/proxy': {     
          target: "http://192.168.2.666:8080",
          changeOrigin: true,  
          pathRewrite:{
              '^/proxy':''
          }
      }
    }
  },
  css: {
    loaderOptions: {
      stylus: {
        import: "~@/assets/css/style.styl"
      }
    }
  },
  configureWebpack: config =>  {
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  }
};

2.项目根目录创建环境配置文件

.env.dev

// .env.dev
 
NODE_ENV = 'development'
VUE_APP_URL_ENV = 'development'
outputDir = 'dev'

.env.uat

// .env.uat
 
NODE_ENV = 'production'
VUE_APP_URL_ENV = 'uat'
outputDir = 'uat'

.env.prod

// .env.prod
 
NODE_ENV = 'production'
VUE_APP_URL_ENV = 'production'
outputDir = 'dist''

3.添加打包命令

"build-dev": "vue-cli-service build --mode dev",
"build-uat": "vue-cli-service build --mode uat"
"build-prod": "vue-cli-service build --mode prod",

4.环境变量使用场景

let baseUrl = "";
if (process.env.VUE_APP_URL_ENV == "development") {
  baseUrl = "http://192.168.2.666:8080"; // 开发环境
} else if (process.env.VUE_APP_URL_ENV == "uat") { 
  baseUrl = "http://192.168.2.777:8080"; // 预生产环境
} else if (process.env.VUE_APP_URL_ENV == "production") {
  baseUrl = "https://api.baidu.com"; // 正式环境
}

5.执行打包npm run build-dev