关于vue.js:Vue-20-添加多环境打包配置vuecli45

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