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

跪求解答: VUE 动态导入 module(不是 VUE 组件)的实现方式?

  •  
  •   tushankaka · 2018-04-01 12:53:14 +08:00 · 5578 次点击
    这是一个创建于 2188 天前的主题,其中的信息可能已经有所发展或是发生改变。
    各位大佬,我在用 VUE 做项目,需要一个动态导入 module 的功能.要实现下面类似的功能.

    要在 app.vue 中动态 import a.js 或者 b.js

    a.js 文件内容如下
    export default {
    a: 'a content'
    }

    b.js 文件内容如下
    export default {
    b: 'b content'
    }

    app.vue 的要根据条件,选择是导入 a.js 还是 b.js.我目前的做法是
    <template>
    </template>
    <script>
    const importURL = condition? './a.js' : './b.js'
    import(importURL).then((aModule) => {
      console.log(aModule.default)
    })
    </script>

    但是这种方式会报错,无法导入.但是如果把 importURL 替换成字符串,就能导入,但是无法实现动态导入这个需求.
    各位大佬,求指点,这样的需求该如何实现?
    5 条回复    2018-04-02 14:01:18 +08:00
    Herobs
        1
    Herobs  
       2018-04-01 13:16:19 +08:00 via Android
    把 if 拿到 import 的外面
    Herobs
        2
    Herobs  
       2018-04-01 13:18:21 +08:00 via Android
    这个是 webpack 提供的特性,建议看一下 webpac 的动态导入文档。
    Biwood
        3
    Biwood  
       2018-04-01 14:03:06 +08:00 via Android
    webpack lazy loading 了解一下
    wzhndd2
        4
    wzhndd2  
       2018-04-02 09:18:08 +08:00
    tushankaka
        5
    tushankaka  
    OP
       2018-04-02 14:01:18 +08:00 via Android
    谢谢各位大佬,问题解决了。我之前只知道组件可以懒加载,没想到 js module 也可以懒加载。就是 script 里面还要写很多的定义。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1194 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:25 · PVG 02:25 · LAX 11:25 · JFK 14:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.