V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
darknoll
V2EX  ›  程序员

在 vue 的原型上注入配置文件,配置文件通过异步 http 访问获取,如何控制初始化顺序?

  •  
  •   darknoll · 2021-01-15 10:21:33 +08:00 · 1333 次点击
    这是一个创建于 1395 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用的脚手架是 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,有没有啥好的方案处理这种情景?

    13 条回复    2021-01-15 15:48:50 +08:00
    1KN6sAqR0a57no6s
        1
    1KN6sAqR0a57no6s  
       2021-01-15 11:05:48 +08:00
    你把 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 })都没有区别
    azcvcza
        2
    azcvcza  
       2021-01-15 11:28:16 +08:00
    那就再接一个 then,把 new Vue 那行放到里边去喽
    darknoll
        3
    darknoll  
    OP
       2021-01-15 12:24:50 +08:00
    @YuxiangLuo 匆忙之间写错了,应该把 await 去掉,前面感叹号是防止 eslint 报错
    duduaba
        4
    duduaba  
       2021-01-15 13:55:14 +08:00
    你这思路有问题,配置化的文件可以借助 babel,webpack 在构建的时候就注入,为什么要在代码执行的过程中注入呢。
    wunonglin
        5
    wunonglin  
       2021-01-15 13:59:31 +08:00
    ???你是想做成配置中心那样还是环境变量那样?
    no1xsyzy
        6
    no1xsyzy  
       2021-01-15 14:05:23 +08:00
    构建时注入一个基本的,前端只请求确认差量。
    如果仍然担心差量巨大,我觉得你们应该给前端发布新版本
    no1xsyzy
        7
    no1xsyzy  
       2021-01-15 14:07:52 +08:00
    另外,你可以通过 code splitting point 将这个 config.json 打包成单独的 dist/conf.js ,作为静态依赖
    有更新可以直接改 conf.js 的内容,甚至由后端根据模板构造 conf.js 的内容。
    darknoll
        8
    darknoll  
    OP
       2021-01-15 15:02:55 +08:00
    @coderfuns 你打包好了之后就一成不变了啊,如果我已经部署好的前端,我想改变后端接口地址了,我可以开始就把它写到 public 的 json 文件里面( public 里面的内容 webpack 是不会改的),然后要改的时候发个请求让后端修改这个配置文件。
    darknoll
        9
    darknoll  
    OP
       2021-01-15 15:04:13 +08:00
    @no1xsyzy 这个怎么弄,还没研究过,有具体的教程吗?
    duduaba
        10
    duduaba  
       2021-01-15 15:22:52 +08:00
    @darknoll 那这个就是配置中心的概念了。如果你用本地文件,直接加载静态文件就可以了啊,试试 systemjs 加载 json,类似 jsonp 方式放置到顶层 window 上。
    tomcats
        11
    tomcats  
       2021-01-15 15:24:03 +08:00
    按照你的需求,你这个配置文件必须得先加载,那么直接丢 script 标签加载好了,弄成全局变量
    linbingcheng
        12
    linbingcheng  
       2021-01-15 15:41:22 +08:00
    promise await async 异步变同步?
    yaphets666
        13
    yaphets666  
       2021-01-15 15:48:50 +08:00
    寸数据库不就行了?
    再说了,前端是不可配置的.跟构建相关的东西都在打包阶段打进去了.不重新打包改不了.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2613 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:42 · PVG 11:42 · LAX 19:42 · JFK 22:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.