跳转至

前端配置频繁更新怎么办

一、开始

有时候会遇到产品经理经常改一些配置，这些配置跟后端关系不大，或者后端不想处理。如果频繁改代码、发布会很繁琐，也容易改出问题。现开发了一个小工具，可以解决这个问题。

二、配置网站到COS

整理思路就是将配置文件写到配置网站，然后定时将更新了的配置同步到腾讯云文件上，然后前端去请求这个文件就行了。

1
配置网站 => 流水线网站定时任务/手动 => 云文件 => 前端拉取

这里面的任何一个环节都是可替换的，配置网站我们也可以自己搭。定时任务放到流水线网站是方便管理，完全可以放到自己dev机器上。

另外jsonp也可以解决这一问题，不用它的原因是： 1. 我们的json文件并没有跨域 2. jsonp的回调必须写在全局环境下，会污染环境。

此外，如果配置更新了，会将更新信息发送到机器人，方便核验。

三、如何优雅的使用

  1. 封装rb请求，方便多个项目复用;
  2. 把rbInfo信息放到vuex的store中，因为一个项目往往有多个地方，需要这种配置；
  3. 在App.vue中去拉取，因为这个页面是顶级页面，保证一定拉取;
  4. 把配置放到mixin，好处是，其他页面读取时不用建额外的变量。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// request-rb.js
export function requestRb(url) {
  return new Promise((resolve, reject) => {
    fetch(url, { method: 'get' })
    .then(e => e.json())
    .then((data) => {
      resolve(data)
    })
    .catch(e => {
      reject(e)
    });
  })
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// store/modules/comm.js
const getDefaultState = () => ({
  rbInfo: {},
});

const state = getDefaultState();

const mutations = {
  changeRbInfo(state, info = {}) {
    state.rbInfo = { ...info };
  },
};

const actions = {
  requestRb({ commit }) {
    requestMatchRb().then((res) => {
      commit('changeRbInfo', res);
    });
  },
};

1
2
3
4
5
6
7
8
9
// App.vue
mounted() {
  this.onFetchRb()
},
methods: {
  onFetchRb() {
    this.$store.dispatch('comm/requestRb');
  }
}

1
2
3
4
5
6
// project-mixin.js
computed: {
  rbInfo() {
    return this.$store.state.comm.rbInfo;
  },
}

1
2
3
4
// some-page.vue
<h2 class="popup-name">
  {{ rbInfo.title }}
</h2>

简单总结一下，更通用的模块应该放在底层。

  1. Store 是可按需使用、可插拔的全局能力，不用也没有污染
  2. app.vue是针对页面的全局能力，没有污染
  3. 全局mixin是对所有组件的混入能力，不可插拔，有污染，所以它里面的内容应该有辨识度，有共识

这里的污染指的是与其他组件变量冲突，导致异常行为。