在基于vue項目開發的時候遇到一個小需求，由于項目部署環境的變更，導致前端工程中一些全局配置需要經常修改，而之前每次變更都需要重新打包發布，耗時太長操作也麻煩，于是參考網上的一些解決方案在項目中增加了一個
globalConfig.js全局配置文件，支持打包完成后修改該文件中對應配置項刷新瀏覽器即可生效。接下來一起看看是如何實現的吧...
實現步驟
- 在項目根路徑中添加
globalConfig.js文件
globalConfig = { // 兼容ie
BASE_API: 'http://localhost:8080/', // 接口請求地址
test: 'hello globalConfig'
}
- 在項目
index.html模板中引入globalConfig.js文件，使用絕對路徑且加入時間戳阻止瀏覽器緩存
html引入globalConfig
<script>document.write('<script src="/globalConfig.js?t=' + new Date().getTime() + '"><\/script>')
</script>
- 如果項目有配置eslint檢測，需要在
.eslintrc.js中添加如下配置項防止eslint校驗變量未定義錯誤
eslint配置忽略報錯
{
...
'no-implicit-globals': 0
}
globals: {
'globalConfig': true
}
- webpack生成環境打包配置
webpack.prod.conf.js中使用CopyWebpackPlugin插件將globalConfig文件從根目錄copy到打包文件根目錄dist文件夾下
webpack打包配置
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
},
{
from: path.resolve(__dirname, '../globalConfig.js'),
to: config.build.assetsRoot,
ignore: ['.*']
}
])
代碼中使用globalConfig配置項
由于globalConfig.js中定義的變量直接掛在在window全局變量上，在代碼中通過globalConfig.test的方式即可獲取globalConfig中配置項的值
console.log('objecttest', globalConfig.test)
通過以上步驟修改后，打包文件夾dist中會生成globalConfig文件，在部署時只需要修改dist文件夾中的globalConfig文件即可生效，而無需再重新打包 :)
修改dist文件夾下globalConfig文件立即生效
效果：修改全局配置立即生效
