在vue中import()语法为什么不能传入变量?

dongasai
  • 176

我在项目中使用了import() 方法,在直接写字符串文件地址的情况下是可以用的
例如:

const cc = () => import('./aa.vue');

上面的代码能导入aa.vue这个组件
但是
如下的代码:

let name = '@/views/aa.vue';
const cc = () => import(name);

传入例如一个变量,或者返回字符串的方法


function jikj() {
    return './gg.js';
}

const cc = () => import(jikj());

这种代码就不能加载这个组件了,我尝试了组件的"相对地址","绝对地址","相对于/的地址","增加的@映射的地址"都提示找不到组件

如下如:
图片描述

找不到啊,郁闷啊

回复
阅读 15.3k
6 个回答

webpack 编译es6 动态引入 import() 时不能传入变量,例如import(dir) , 而要传入字符串 import('path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态。

但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如import(`./path/${myFile}`), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。

上次已经回答过了类似的问题,还是贴出webpack的官方文档:import()

虽然import()方法在es规范中是支持动态引入的,但是webpack的实现是并不支持。
import相关描述

例如import(foo),这样完全动态的加载方式将会失败,因为webpack需要一些文件位置信息。因为变量foo可能是系统或项目中任何文件的路径。import()必须至少包含关于模块所在位置的一些信息,因此让捆绑可以局限于特定的目录或文件夹。

import(./path/${myFile}.vue)这种写法解决了import不能传入变量的问题。
注意:

  1. ${myFile}变量前边一定要写一个带"/"的字符串。
  2. ".vue" 不能写在变量里,要写在字符串里。

这个问题我感觉应该是es6 module问题,我截个图给你瞅瞅:图片描述

import用法

你这里:

function jikj() {
    return './gg.js'
}
const cc = () => import(jikj());
//这里的变量cc相当于
const cc = function(){
    return import(jikj())
}

根据es6module语法,由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
不知道是不是这回事

require的参数支持表达式的形式
import是静态的,必须在编译的时候即确定依赖关系

webpack是在编译时查找模块的,而你用变量的方式保存路径是运行时执行的,怎么找的到?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏