Webpack一键打包多个环境

1. 安装打包插件

安装如下插件,以便可以在打包命令中设置环境变量区分不同的环境。

javascript 复制代码
npm install --save-dev cross-env

2. 配置打包命令

在package.json中配置正式环境和测试环境打包命令,同时添加一个命令同打包两个环境。

javascript 复制代码
// package.json
"scripts": {
	"dev": "vue-cli-service serve",
	"lint": "vue-cli-service lint",

	"prod": "rimraf dist_prod && cross-env BUILD_ENV=prod NODE_ENV=production vue-cli-service build", // 正式环境包
	"test": "rimraf dist_test && cross-env BUILD_ENV=test NODE_ENV=production vue-cli-service build", // 测试环境包
	"build": "rimraf dist_prod dist_test && cross-env BUILD_ENV=prod NODE_ENV=production vue-cli-service build &&  cross-env BUILD_ENV=test NODE_ENV=production vue-cli-service build" // 一键打包命令
},

3. 配置打包输出

在vue.config.js中添加打包输出配置,其中正式环境打包输出到dist_prod文件夹,测试环境打包输出到dist_test文件夹。

javascript 复制代码
// vue.config.js

const outputDir = "dist_" + process.env.BUILD_ENV;

if(process.env.BUILD_ENV=="prod"){
	process.env.VUE_APP_BASE_API = "https://api.xxxx.com"      // 正式环境地址
}else if(process.env.BUILD_ENV=="test"){
	process.env.VUE_APP_BASE_API = "https://test_api.xxxx.com" // 测试环境地址
}


module.exports = {
	outputDir: outputDir,

}

通过以上3步,就可以执行npm run build同时打包出两个环境的项目包了。

相关推荐
百思可瑞教育2 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1002 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1002 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登2 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码5 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-5 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc5 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_6 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20006 天前
Webpack开发:从入门到精通
前端·webpack·node.js
叫我阿柒啊6 天前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发