关于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