Webpack+Vue动态环境配置方案
webpack 打包的域名配置写死在项目里，每次切换环境都得重新打包，真挺烦的。后台同事一拍脑袋，说不如搞个公共配置文件，改域名只动一处，其他照旧。嗯，思路还挺香。于是就用上了 generate-asset-webpack-plugin，打包时自动生成配置文件，方便多环境切换。
npm install --save-dev generate-asset-webpack-plugin 一行装完插件，在项目根目录整一个 serverConfig.json，像这样：
{
"ProdUrl": "http://test.com"
}打包的时候就自动生成一份类似的配置文件进 dist，你前端项目读取它就完了。域名变了？改下 serverConfig.json，不用重新 build，省心多了。
对 Vue 项目来说，还挺适配的。搭配 webpack 自定义配置搞一搞，效果不错。如果你项目里也经常来回切换测试环境、预发环境、正式环境，这招真挺实用。要了解 webpack 配置相关内容，可以看看这篇Webpack 配置文件自定义指南。
哦对了，serverConfig.json 别忘了加进你的 .gitignore，不然推上去就有点尴尬了。
如果你用的是 Vue + Webpack，又不想频繁打包切域名，不妨试试这招，改配置文件一秒搞定，效率提升看得见。
文件大小：47.32KB
评论区