跪求解答： VUE 动态导入 module(不是 VUE 组件)的实现方式？
tushankaka · 2018-04-01 12:53:14 +08:00 · 5685 次点击这是一个创建于 2434 天前的主题，其中的信息可能已经有所发展或是发生改变。
各位大佬，我在用 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 替换成字符串，就能导入，但是无法实现动态导入这个需求．
各位大佬，求指点，这样的需求该如何实现？
要在 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 替换成字符串，就能导入，但是无法实现动态导入这个需求．
各位大佬，求指点，这样的需求该如何实现？
 |
1
Herobs 2018-04-01 13:16:19 +08:00 via Android
把 if 拿到 import 的外面
|
|
2
Herobs 2018-04-01 13:18:21 +08:00 via Android
这个是 webpack 提供的特性，建议看一下 webpac 的动态导入文档。
|
 |
3
Biwood 2018-04-01 14:03:06 +08:00 via Android
webpack lazy loading 了解一下
|
 |
4
wzhndd2 2018-04-02 09:18:08 +08:00
vue 的异步组件了解一下 https://cn.vuejs.org/v2/guide/components.html#异步组件
|
 |
5
tushankaka OP 谢谢各位大佬，问题解决了。我之前只知道组件可以懒加载，没想到 js module 也可以懒加载。就是 script 里面还要写很多的定义。。。
|
Select Language