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

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'

【Vue|Vue 2.0 添加多环境打包配置(vue-cli4.5)】.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