前端项目使用import()传入路径变量不能动态导入模块的问题

原创 已于 2023-02-13 11:31:21 修改 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

于 2023-01-15 22:21:03 首次发布
ES6的import()函数允许动态加载模块，但因为Webpack在编译时需确定模块路径，所以import()的参数不能完全动态。这意味着部分模块路径信息需要在编译时已知，否则将无法正确处理。这在Vue等框架中可能会引发问题，需要通过特定技巧解决动态导入的限制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

import(变量)报错，找不到地址
分享前端知识，记录前端进阶
11-23 1468
在js中想要根据不同条件，动态import不同的包。尝试给import函数传入变量，发现报错找不到变量对应的包。本文会简短讲解该问题背后的原因，以及如何正确的引入包。
鸿蒙HarmonyOS实战：应用程序开发与使用-动态import
weixin_55362248的博客
08-13 1612
动态import根据入参是常量还是变量，分成动态import常量表达式和动态import变量表达式两大特性规格。
import实现动态路由时不能使用变量的问题
qq_32687373的博客
09-25 3102
情景 开发模式下路由跳转很正常，但是打包后，点击菜单路由视图并不加载，说Cannot find module 解决 方法一 将component = import('@/views/' + path + '.vue')替换为： // resolve不能省略 component = resolve => require([`@/views/${path}.vue`], resolve) 方法二 使用dynamic-import插件（这并不是一个插件的名字）。 原因 webpack 编译es6
解决vue的router组件component在import时不能使用变量问题
11-20
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir =’path/to/my/file.js’ ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加载，从而实现懒加载。 import语法参考资料如下：点击进入 修改后 补充知识：由vue-router
动态引入import()变量失效问题
diaogechuo1880的博客
09-05 5095
import我们通常的用法是 import('@/pages/demo').then(item=>{}) 但是现在有个需求必须要动态传入路径，发现传入变量后不能识别，代码如下 const modelpath = ‘@/pages/demo’ import(modelpath).then(item => {}) 因为web...
vue3 vite 动态路由 （）=＞import() 不能使用变量 有时候会有问题
callBack_____的博客
04-26 1544
vue3 vite 动态路由 （）=>import() 不能使用变量 有时候会有问题
【在vue中import()语法不能传入变量 - 】
u012632105的博客
02-16 904
在vue中import()语法不能传入变量 - 一年八个月 - 博客园
Vue import()无法根据变量加载组件
weixin_47030193的博客
12-13 829
我试过了 ()=>import(path)，require，import(""+`${path}`)这些对我都没用，还是无法加载。页面上我使用<component :is="current"></component>想要实现动态切换组件。组件所在路径是数据库表里定义的，所以我需要根据变量来动态加载。但是import()只能写死路径，不能用变量。最后我改成下面这样就可以正常导入了。
详解webpack import()动态加载模块踩坑
10-18
解决这个问题的方法是尽可能使导入路径静态化，例如使用字符串拼接： ```javascript import(`./pages/${ComponentName}`) ``` 这样既能保持封装性，又能避免引入不必要的模块。 此外，`import()` 中的相对路径是...
13 代码分割之import静动态导入
Stephy_Yy
05-09 1509
前端首屏优化方案之一 项目构建时会整体打包成一个bundle的JS文件，而有的代码、模块是加载时不需要的，需要分割出来单独形成一个文件块chunk（不会打包在main里），让模块懒加载（想加载时才加载），以减少应用体积、减少加载时的体积。 import是关键字而非函数（类比typeof，typeof '123’ or typeof('123')） 静态导入： import xxx from ''，导入并加载时，导入的模块会被编译，不是按需编译 动态导入：import('') 根据条件或按需的模块导入
【Python动态导入机制】：学习使用__import__和importlib来动态处理导入问题
![python相对路径导入bug解决：ImportError: attempted relative import with no known parent package]...# 1. Python动态导入机制概述 Python作为
ECMAScript: import()不能传入变量？
camille的专栏
02-03 2418
描述 // fulfilled import('./index.jsx'); // rejected const uri = './index.jsx'; import(uri) 解决方案 webpack 编译es6 动态引入 import() 时不能传入变量，例如import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。 虽然import()方法在es规范中是支持动态引入的，但是webpack的实
vue动态组件找不到module问题,import不能接收动态参数
weixin_43080554的博客
05-08 3377
报错信息 代码是这样的;但是编译之后报上面错误. 原因是webpack打包的时候解析到import(path)的时候没有那么智能不会去解析path(官网是这样说的) 例如import(foo)，这样完全动态的加载方式将会失败，因为webpack需要一些文件位置信息。因为变量foo可能是系统或项目中任何文件的路径。import()必须至少包含关于模块所在位置的一些信息，因此让捆绑可以局限于特...
import搜索路径及使用、类变量、成员变量、局部变量的实例
垃圾桶丁
12-10 710
ipmort的搜索路径： 1、在调用文件的同级目录下； 2、os.py同级的系统目录下； 3、新建环境变量PYTHONPATH，把要导入的目录加进去。
python中import 模块的路径问题
热门推荐
lambda-fk 的专栏
02-11 1万+
对于系统的包我们导入没有疑问 但是如果我们自己写的文件夹里面的python文件呢？ 自己写的文件import时候会出现路径问题的疑惑 比如同目录下面的python文件被import 时候 和 其他目录下面的python文件被import时候 根据当前的python文件是否为执行文件 import的python文件的路径就是有区别的 1.先看看python如何定位到模块文件的 使用 imoort a 或者 from a import func 使用这种import 的时候是如何定位到模块
Vue-router 里 import 动态导入模块报错
m0_63476377的博客
11-23 2669
router 里 import 报错 如果没有安装babel-plugin-syntax-dynamic-import插件，并在.babelrc中引入此插件，那么就会报错。这是 webpack 动态导入模块的设置。 参考： Vue-router 里 import 动态导入模块报错_learning_H的博客-优快云博客_vue路由import引入报错 -------------------------------------------------------------------.
import 动态路由引入路径报错 Error:Can‘t find mudules
web_ding的博客
03-31 1846
原因： 因为import 在webpack4中动态路由中不能包含变量 出错写法： export const loadView = (view) => { // 路由懒加载 //return (resolve) => require([`@/views/${view}`],resolve) return () => import(`@/views/${view}`) } 正确写法： export const loadView = (view) => { // 路
详细解释require 和 import 来引入模块，动态加载和静态加载的区别
最新发布
03-22
### Require与Import的区别 Require和Import的主要区别在于它们所属的模块化标准不同。Require是CommonJS规范的一部分，主要用于Node.js环境中[^1]。它通过同步的方式加载模块，在代码执行时立即解析模块内容，并且支持动态路径加载。这意味着可以根据条件来决定加载哪个模块。 相比之下，Import属于ES6（ECMAScript 2015）模块化语法的一部分[^2]。它是静态导入方式，意味着在编译阶段就已经确定了哪些模块会被加载，因此无法像Require那样实现完全动态的路径加载。不过，这种设计使得工具链可以更好地优化依赖关系，从而提高性能。 #### 动态加载与静态加载的概念 动态加载指的是能够在程序运行过程中根据特定逻辑或条件去请求新的资源或者功能组件的过程。对于Require而言，由于其灵活性允许传入变量作为参数来进行模块的选择性载入操作，所以它可以轻松完成这一任务。 另一方面，静态加载是指所有的外部脚本链接都在HTML文档头部定义好，并由浏览器一次性全部下载下来；而在JavaScript内部，则指那些不随时间改变、始终固定不变地存在于源码里的import声明语句所代表的行为模式——即这些关联不会因为任何因素而发生变化[^4]。尽管如此，现代JavaScript也提供了诸如`import()`这样的方法来模拟异步按需加载的效果，这实际上是一种函数调用形式而非传统意义上的import语句。 ```javascript // 使用 require 进行动态加载的例子 let modulePath = someCondition ? './moduleA' : './moduleB'; const dynamicModule = require(modulePath); // 使用 import() 实现类似的动态效果 async function loadDynamicModule(condition) { const moduleName = condition ? './moduleC' : './moduleD'; const dynamicEsModule = await import(moduleName); return dynamicEsModule; } ``` ### 总结 - **Require**: 属于CommonJS规范，适合Node.js环境下的后端开发工作流，具备强大的动态能力。 - **Import/Export**: 来自ES6的新特性，更倾向于前端框架集成及现代化构建流程的支持需求，强调提前分析依赖结构以便进一步处理(如tree-shaking). 两者各有千秋，具体选用哪一种取决于实际应用场景和个人偏好等因素考虑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值