通过配置文件统一管理路径和展现

前端技术分享之 vue打包配置文件

背景:

有些情况下，我们做的产品需要提供给多个客户使用，而不同的客户又需要通过自己的环境来访问，我们无法要求客户使用统一的环境，那么我们提供的产品就需要支持可配置，于是就有了这个需求。

使用场景:

vue-cli3.0 + vuex

使用步骤

1. 将配置文件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. 如何读取配置文件

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

3.客户访问的话只需要通过简单修改build包里的参数即可投入使用