使用的脚手架是 vue-cli4, 现在需求是这样的，要实现前端的可配置化，比如 axios 访问的 http 地址可配置，这样就在 public 文件夹中增加一个 config 的文件夹，里面专门放一些 json 配置文件。 因为要在 js 文件中访问这些全局配置，所以我打算把这些配置挂载到 vue 的原型，然后在 main.js 中这样做 !(async () => { await axios.get('configs.json').then(response => { Vue.prototype.$config = response.data }) })()
new Vue({ router, store, render: h => h(App) }).$mount('#app')
那么我现在有个问题，如果配置文件体积过大，导致在其他 js 使用配置项的时候还没有返回，应该怎么处理这种情况？也就是说，我最好把获取 configs.json 同步化，不需要异步获取配置文件，但是访问 public 中的东西又没办法直接 import，有没有啥好的方案处理这种情景？
 |
1
1KN6sAqR0a57no6s Jan 15, 2021
你把 new Vue 也放到 axios 请求的 callback 里不就好了
还有你这个 !(async () => { await axios.get('configs.json').then(response => { Vue.prototype.$config = response.data }) })() 写得好奇怪，感叹号是什么意思，用了 async/await 为什么还要用 then 换成 axios.get('configs.json').then(response => { Vue.prototype.$config = response.data })都没有区别 |
 |
2
azcvcza Jan 15, 2021
那就再接一个 then，把 new Vue 那行放到里边去喽
|
 |
3
darknoll OP @YuxiangLuo 匆忙之间写错了，应该把 await 去掉，前面感叹号是防止 eslint 报错
|
 |
4
duduaba Jan 15, 2021
你这思路有问题，配置化的文件可以借助 babel，webpack 在构建的时候就注入，为什么要在代码执行的过程中注入呢。
|
 |
5
shakaraka PRO ？？？你是想做成配置中心那样还是环境变量那样？
|
 |
6
no1xsyzy Jan 15, 2021
构建时注入一个基本的，前端只请求确认差量。
如果仍然担心差量巨大，我觉得你们应该给前端发布新版本 |
|
7
no1xsyzy Jan 15, 2021
另外，你可以通过 code splitting point 将这个 config.json 打包成单独的 dist/conf.js ，作为静态依赖
有更新可以直接改 conf.js 的内容，甚至由后端根据模板构造 conf.js 的内容。 |
|
8
darknoll OP @coderfuns 你打包好了之后就一成不变了啊，如果我已经部署好的前端，我想改变后端接口地址了，我可以开始就把它写到 public 的 json 文件里面（ public 里面的内容 webpack 是不会改的），然后要改的时候发个请求让后端修改这个配置文件。
|
|
10
duduaba Jan 15, 2021
@darknoll 那这个就是配置中心的概念了。如果你用本地文件，直接加载静态文件就可以了啊，试试 systemjs 加载 json，类似 jsonp 方式放置到顶层 window 上。
|
 |
11
tomcats Jan 15, 2021
按照你的需求，你这个配置文件必须得先加载，那么直接丢 script 标签加载好了，弄成全局变量
|
 |
12
linbingcheng Jan 15, 2021
promise await async 异步变同步？
|
 |
13
yaphets666 Jan 15, 2021
寸数据库不就行了?
再说了,前端是不可配置的.跟构建相关的东西都在打包阶段打进去了.不重新打包改不了. |
Select Language