大家在日常开发上线，上预发，测试环境的时候，一定遇到过不同环境，配置项不同的情况，比如不同的环境部署的代码一致，只有 Host 需要配置不同。这个时候，如果每次都要重新修改代码，不仅显得不专业，也容易在提交的时候忘记这个配置，提交错误就是上线灾难。所以，有必要在打包后的文件中生成配置文件，供在外部修改配置。本篇就是为了解决这个问题而写~~
这要用到一个 webpack 插件 generate-asset-webpack-plugin
Install
npm install –save-dev generate-asset-webpack-plugin
在 webpack.prod.cong.js 中引入该插件
const GeneraterAssetPlugin = require(‘generate-asset-webpack-plugin’)
在项目根目录下建立配置文件 serverConfig.json 内部配置为 {“baseUrl”:””} 将该配置文件引入
const serverConfig = require(‘../serverConfig.json’)
将 Json 中的配置项返回
const createJson = function(compilation) {
return JSON.stringify(serverConfig)
}
在 webpackConfig -> plugin 中写入
new GeneraterAssetPlugin({
filename: ‘serverConfig.json’,// 输出到 dist 根目录下的 serverConfig.json 文件, 名字可以按需改
fn: (compilation, cb) => {
cb(null, createJson(compilation));
}
})
在引入 axios 的文件中做如下配置
axios.get(‘serverConfig.json’).then((result) => {
window.localStorage[‘JSON_HOST’] = result.data.baseUrl
}).catch((error) => {console.log(error) });
利用 localStorage 存储 JSON_HOST 配置值，需要取时再取出 JSON_HOST，再将需要配置 host 的地方写成
host: window.localStorage[‘JSON_HOST’]
打包后在根目录就会生成如下 dist 文件
外部就可以通过修改该配置文件，变更 host 了