前端技术分享之 vue打包配置文件
背景:
有些情况下，我们做的产品需要提供给多个客户使用，而不同的客户又需要通过自己的环境来访问，我们无法要求客户使用统一的环境，那么我们提供的产品就需要支持可配置，于是就有了这个需求。
使用场景:
vue-cli3.0 + vuex
使用步骤
- 将配置文件configjson放在public文件夹下，这样配置文件就不会被build命令影响而被打包,配置文件内容如下:
{
"baseUrl": "http://***",
"?baseUrl": "代理地址测试环境",
"mainTitle": "main",
"?mainTitle": "主页标题",
"showBanner": true,
"?showBanner": "是否显示首页banner图",
"bannerImg": [{
"url": "",
"name": "banner1.jpg",
"image": ""
},
{
"url": "",
"name": "banner3.jpg",
"image": ""
}],
"?bannerImg": "banner图数组"
}
- 如何读取配置文件
2.1 在vue.config.js中读取baseUrl设置代理地址
const config = require('./public/config.json')
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? 'arapp/' : '/',
outputDir: 'arapp',
devServer: {
proxy: {
'/port': {
target: config.baseUrl, // 测试服域名
ws: false,
changOrigin: true,
pathRewrite: {
'^/port': ''
}
}
},
overlay: {
warnings: true,
errors: true
}
}
}
2.2 需要在main.js中通过axios请求，并保存在全局VUE中，代码如下:
function getServerConfig () {
let url = process.env.NODE_ENV === 'production' ? './config.json' : '/config.json'
return new Promise((resolve, reject) => {
axios.get(url).then((result) => {
let config = result.data
Vue.prototype.configData = config // 设置全局
resolve()
}).catch((error) => {
reject(error)
})
})
}
async function init () {
await getServerConfig()
new Vue({
router,
store,
render: h => h(App),
data: {
Bus: new Vue()
}
}).$mount('#app')
}
init()
2.3 vue文件中直接通过this.configData访问，js文件里需要先引入一下Vue，然后const configData = Vue.prototype.configData
