动态引入import()变量失效问题

最新推荐文章于 2026-05-16 09:05:16 发布

转载最新推荐文章于 2026-05-16 09:05:16 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/yunyea/p/11469996.html

标签

#vue

收录于

本文介绍了如何在Vue项目中使用动态字符串模板解决动态路径导入模块的问题，讨论了webpack对动态路径的支持以及提供的解决方案，包括使用字符串模板和部分信息传递给webpack。

import我们通常的用法是

import('@/pages/demo').then(item=>{})

但是现在有个需求必须要动态传入路径，发现传入变量后不能识别，代码如下

const modelpath = ‘@/pages/demo’
import(modelpath).then(item => {})

因为webpack的现在的实现方式不能实现完全动态，所以可以通过字符串模板来提供部分信息给webpack，如下

const modelpath = ‘/demo’
import(`@/pages${modelpath}`).then(item => {})

转载于:https://www.cnblogs.com/yunyea/p/11469996.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coldriversnow

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue异步组件与组件懒加载（解决import不能导入变量字符串的路径问题）

Alecor的博客

10-15

1万+

在写项目的时候，需要动态配置路由菜单，所有的菜单都是通过配置生成的，这就意味着菜单的路径（在vue开发项目里面就是一个字符串的路径）需要异步加载进去，但是由于对webpack的import不是很熟悉，所以就有一下的坑需要填了错误的原因分析 _import.js module.exports = file => () => import(file) 但是这种方法错误的原因是： we...

1 条评论您还未登录，请先登录后发表或查看评论

import实现动态路由时不能使用变量的问题

qq_32687373的博客

09-25

3230

情景开发模式下路由跳转很正常，但是打包后，点击菜单路由视图并不加载，说Cannot find module 解决方法一将component = import('@/views/' + path + '.vue')替换为： // resolve不能省略 component = resolve => require([`@/views/${path}.vue`], resolve) 方法二使用dynamic-import插件（这并不是一个插件的名字）。原因 webpack 编译es6

Formbuilder.js国际化实现方案：多语言表单构建器开发指南

最新发布

gitblog_00005的博客

05-16

574

在当今全球化的数字时代，构建支持多语言的Web应用已成为基本需求。Formbuilder.js作为一个轻量级的图形化表单构建器，虽然本身没有内置国际化功能，但通过巧妙的扩展机制可以轻松实现多语言支持。本文将为您详细解析如何为Formbuilder.js添加国际化能力，打造真正面向全球用户的多语言表单构建器。 ## 🌍 为什么需要Formbuilder.js国际化？ Formbuilder.j

import() 动态加载component组件失败

Start2019

01-21

7041

1.Error: Cannot find module 'function () { return __webpack_require__("./src/comp 2. vue 报错[Vue warn]: Failed to mount component: template or render function not defined. 3. vue报错 Uncaught (in promise) Error: Cannot find module '@/views/Home.vue'

ECMAScript: import()不能传入变量？

camille的专栏

02-03

2576

描述 // 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的实

微信小程序自定义组件样式失效

qq_62733113的博客

04-29

1525

解决wxss无效的问题

vue动态渲染图片src失效，引入图片失败的解决办法，以及原因详解

hnsfdxweb3的博客

05-21

926

在Vue项目中动态渲染图片的src属性时，直接传递字符串路径可能导致图片无法加载，而通过import引入路径后赋值给src则能正常显示。这是因为打包工具（如Webpack或Vite）在构建阶段会处理静态资源引用（如import或require），将其转换为最终部署路径。然而，动态绑定的字符串路径无法在构建阶段被识别为资源引用，因此不会被处理，导致路径错误。解决方案有两种：一是通过import引入路径并赋值给变量；二是将静态资源放在public目录下，直接使用绝对路径。理解构建工具的资源处理机制，选择合适的方

react 使用@loadable/component 实现路由动态懒加载

qq_37124515的博客

07-02

4663

踩坑记录动态引入import()变量失效问题， import不能导入变量字符串的路径问题因为webpack的现在的实现方式不能实现完全动态，所以可以通过字符串模板来提供部分信息给webpack，如下 /** * 根据已经获取的菜单组合需要生成的路由 * @param list 数据 * @param parentPath 父级的路径，组合子级可访问路径 */ const combinationRouting = (list: Menus[], parentPath?: string) =&

Vite 6 中 new URL() 与 import.meta.url 路径解析问题解析

gitblog_00159的博客

09-10

431

在 Vite 6 版本中，开发者们遇到了一个关于静态资源路径解析的重要变化。这个问题主要出现在使用 new URL() 结合 import.meta.url 进行动态资源路径构建的场景中。在 Vite 5 版本中，开发者可以这样编写代码来动态获取资源路径： ```javascript export function getImg(url: string) { return new URL(...

es6 import()函数

aa_mmnn的博客

02-19

598

import()函数简介前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他模块执行（叫做”连接“更合适）。所以，下面的代码会报错。 // 报错 if (x === 2) { import MyModual from './myModual'; } 上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令.

引入问题，变量问题

我是我

02-01

235

今天在学习的过程中又解决了两个小问题，因为我是新手，所以希望我的小小的经验会帮助到你哦，话不多说，上图： 1.首先第一个问题，这个是注意事项，我试过了如果小写也不会报错，但是还是推荐给大家啦当你以文件中定义的名字为大写，在引入过程中，最好也要大写，就像这样：第二个问题：当你把URL引入之后，他就变成了一个变量，你千万千万把它当成地址用的时候不要加引号哦，那样它就变成一个字符串啦。每天进步一...

JavaScript 和 typeScript 中的 import、from

墨鱼菜鸡

07-11

3841

From：https://segmentfault.com/a/1190000018249137?utm_source=tag-newest Github - allowSyntheticDefaultImports should be the default?exports、module.exports和export、export deault到底是...

TypeScript 报错汇总

热门推荐

黑猫几绛的博客

07-09

1万+

在这篇文章中将记录我遇到的ts错误，应该会持续更新。有时候从错误点入手学习似乎是一个不错的选择，所以也欢迎你私信我一些ts的问题。函数返回元组的时候，在使用的时候，元素可能是元组中的任意一个类型，比如：所以，在对返回的元组进行取值操作时，返回值内的类型顺序，可能和函数内的顺序不一致，需要多加一个条件判断：在这个报错案例中，第四行的判断也是很重要的知识点，面对联合类型传参的情况，我们常常需要通过类型判断来决定最后要执行哪个方法：二、类型 “string” 到类型 “number” 的转换可能是错误的ts(

vue-admin无法使用import转动态路由的问题

爬墙少年

03-28

480

使用import方法，可以在首页加载出页面，但是在跳转的时候提示无法找到自定义的module模块，在 router/index.js方法中可以正常加载自定义的页面，但是动态路由显示not find module @views/....这使用这个方法的时候又提示MarkdownEditor模块错误，不知道是拉代码还是什么原因，重新复制一份MarkdownEditor到components下面，重新。

VUE动态路由加载坑

OUalen的博客

04-20

2031

动态路径不能使用 component:() => import(`@${item.component}`) 也不能这样正确方式路径前部分必须有固定路径。 @/view/

import(变量)报错，找不到地址

分享前端知识，记录前端进阶

11-23

1579

在js中想要根据不同条件，动态import不同的包。尝试给import函数传入变量，发现报错找不到变量对应的包。本文会简短讲解该问题背后的原因，以及如何正确的引入包。

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

Christopher的博客

01-15

1947

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

路由import懒加载不能识别变量解决办法

m0_48292596的博客

05-10

1697

一般我们做动态路由的时候,数据都是有后端获取的,包括了component地址, 现在有个需求必须要动态传入路径，发现传入变量后不能识别，代码如下 //item.component 这个变量输出是 @/view/index.vue component:()=>import(item.component) //以这种方式引入变量就出报错 //所以要改成以下方法 //定义一个函数 let _import =(view) => { console.log(view) .

关于vue中动态导入无法使用变量问题解决办法

weixin_44326194的博客

03-08

406

路径是非常敏感的东西，一定要按照预设的方式去保存字符串，这些都是强规范性的东西。一般都是为了做权限控制，后端把配置好的信息根据登录用户的不同，返回来，其中会包含组件的地址，然后我们用这个地址解析成组件，渲染在页面上。网上搜到了很多解决办法，都是治标不治本的，而且没明白自己为什么要动态引入，难道仅仅是为了写的优雅一点吗？我既然要动态引入为啥还要预先加载所有组件，那并不是我想要的，读取文件也是要时间的喂！所以说，没必要的场景就不要用变量动态导入组件了，明确自己的目的再用适合的方法。还有用了一个动态导入库的。