vue动态组件找不到module问题,import不能接收动态参数

最新推荐文章于 2023-01-15 22:21:03 发布
最新推荐文章于 2023-01-15 22:21:03 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： vue的一些零碎 文章标签： vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43080554/article/details/105995096
版权

报错信息
在这里插入图片描述
在这里插入图片描述
代码是这样的;但是编译之后报上面错误.
原因是webpack打包的时候解析到import(path)的时候没有那么智能不会去解析path(官网是这样说的)
在这里插入图片描述

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

也就是说解析import要给出一些重要的文件位置信息
最后修改成这样就可以了(真的很坑,浪费了一下午才搞通)
在这里插入图片描述

你跟我吃醋的样子可爱极了
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态加载组件import引入组件找不到组件（Error: Cannot find module）
宁波阿成的博客
06-05 1044
vue动态加载组件import引入组件找不到组件（Error: Cannot find module）
vue动态import找不到module问题的解决方案
艺术就是爆炸!
04-21 1092
vue动态import找不到module问题的解决方案
webpack import() 动态加载模块踩坑
weixin_33738555的博客
07-16 6223
import webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。 这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。 在代码中所有被import()的模块，都将打成一个单独的包，放在chunk存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步...
Vue-router 里 import 动态导入模块报错
m0_63476377的博客
11-23 2367
router 里 import 报错 如果没有安装babel-plugin-syntax-dynamic-import插件，并在.babelrc中引入此插件，那么就会报错。这是 webpack 动态导入模块的设置。 参考： Vue-router 里 import 动态导入模块报错_learning_H的博客-CSDN博客_vue路由import引入报错 -------------------------------------------------------------------.
解决 VUE import不能使用动态变量问题
QQ_930289838
05-12 3493
component: () => import('@/views/xxxx/index') 改为 记得不是单引号而是esc下面~的标识符· component: (resolve) => require([`@/views/${item.url}/index`], resolve),
vue动态路由import异步加载组件，找不到module的问题
likuntao123的博客
09-10 9776
问题的由来：webpack分模块打包导致import路径src少一级目录（ps：路径是由后端提供的）。 解决办法： if (localJsonRouter.listenRouter) {//把后端的路径信息储存到sessionStorage listenRouter = localJsonRouter.listenRouter; listenRouter.forEach(item...
前端项目使用import()传入路径变量不能动态导入模块的问题
Christopher的博客
01-15 1459
前端项目使用import()传入路径变量不能动态导入模块的问题
vue import,找不到该文件。
dfjifjeiwqfjioewqpjf的专栏
07-02 1803
import iSelect from "@/components/changeCity/iselect.vue"; 引入一个.vue，后程序报错. 该文件我手动重命名后，系统无法找到。 解决办法： 删除该文件 重新创建。 Failed to compile with 1 errors friendly-errors 17:26:43 This relative module was not found: ...
Vue 中如何正确引入第三方模块的方法步骤
10-17
这段代码定义了一个对象，其中包含一个`install`方法，该方法接收Vue构造函数，并使用`Object.defineProperty`将`$echarts`属性绑定到Vue实例上，使得在任何Vue组件中都可以通过`this.$echarts`访问ECharts。...
vue框架中props的typescript用法详解
11-21
当涉及到Vue组件的props时，TypeScript能够帮助开发者明确地定义和约束传入组件的数据类型，从而减少潜在的错误。 **什么是TypeScript？** TypeScript是JavaScript的一个超集，它在JavaScript的基础上添加了静态...
vue + typescript + video.js实现 流媒体播放 视频监控功能
10-16
组件接收`options`属性，可以用来配置播放器，例如设置源地址、播放器选项等。 ```html <div class="module_video_player"> <video ref="videoPlayer" class="video-js" autoplay></video> import { ...
vue项目中使用Svg的方法
10-17
为了更优雅地在Vue项目中使用SVG，我们可以创建一个`SvgIcon`组件，这个组件可以接收一个图标类名作为属性，动态地渲染出对应的SVG图标。组件的实现代码如下： ```javascript // SvgIcon.vue export ...
【js】Ramda在vue和node两端的使用
01-20
这样，你就可以在Vue组件中通过`import`导入Ramda库： ```javascript <!-- Vue模板 --> import R from 'ramda'; export default { data() { return { list: [1, 2, 3, 4, 5], }; }, mounted() { const...
vuex的module模块用法示例
10-17
Vuex是专为Vue.js应用程序开发的状态管理模式和库，它主要解决的问题是多个组件共享状态时，这些状态的管理和同步。当应用变得复杂时，如果仅仅使用组件内的data和计算属性来管理状态，会变得相当困难，这时候就需要...
【JavaScript源代码】Vue中引入svg图标的两种方式.docx
12-30
接下来，将SVG图标文件夹中的每个SVG文件转换为Vue组件，可以使用`@vue/cli-service`提供的`vue-cli-service`命令： ```bash vue-cli-service build --target lib --name icons src/icons/*.svg ``` 这将在`dist`...
vue中ts无法识别引入的vue文件，提示找不到xxx.vue 模块解决办法
热门推荐
weixin_43777074的博客
01-19 1万+
在vue + ts项目中，在.ts中引入.vue文件，会提示打不到module，但是编译可能成功，运行也不报错 在src根目录下，新建一个sfc.d.ts文件这个里面的 declare module “*.vue” { import Vue from ‘vue’ export default Vue } 在shims-vue.d.ts文件中官方文档有一个地方是说写到这里来着，所以shims-vue.d.ts中的这段要删掉，把他们写到 sfc.d.ts中，问题就可以解决了 ...
vue中import引入模块路径中@符号是什么意思
qq_27009517的博客
08-30 567
在编写vue文件中引入模块 1 importmodel from"@/common/model"; 这里路径前面的“@”符号表示什么意思？ 1 2 3 4 5 6 7 8 9 10 11 resolve: { // 自动补全的扩展名 extensions: ['.js','.vue','.json'], ...
vue3配置vue.config.js文件后内容不生效
qq_41988113的博客
04-26 4593
问题：我们写路径方便，会给一些路径起别名，vue-cli3需要自己对vue.config.js文件进行配置，但是发现更新完之后vue.config.js内容不起效果 module.exports = { configureWebpack: { resolve: { alias: { // 脚手架3中起别名可以用@代替src 'assets': '@/assets', 'common': '@/common', 'co
vue 3组件动态将import的子组件添加到组件中
最新发布
06-07
在 Vue 3 中，可以使用 `import()` 函数动态加载子组件，然后通过 `defineAsyncComponent` 函数定义异步组件，最后在父组件中动态引用该异步组件并将其添加到父组件中。具体实现可以参考以下代码示例： ```vue <template> <div ref="container"></div> </template> <script> import { defineAsyncComponent } from 'vue'; export default { mounted() { this.loadChildComponent(); }, methods: { async loadChildComponent() { const ChildComponent = await import('./ChildComponent.vue'); const asyncComponent = defineAsyncComponent(ChildComponent); this.$refs.container.appendChild(asyncComponent); } } } </script> ``` 在上述代码中，我们在组件的 `template` 中定义了一个 `div`，并使用 `ref` 指令给它命名为 `container`。然后在组件的 `mounted` 生命周期钩子中调用 `loadChildComponent` 方法。该方法中使用 `import()` 函数动态加载子组件 `ChildComponent.vue`，然后使用 `defineAsyncComponent` 函数定义异步组件 `asyncComponent`。最后，我们将 `asyncComponent` 添加到 `container` 中，以动态将子组件添加到父组件中。 需要注意的是，`defineAsyncComponent` 函数需要接收一个返回 `Promise` 对象的函数作为参数，该函数会在组件被实例化时调用，返回一个 `Promise` 对象，表示异步组件的定义。因此，在上述代码中，我们将使用 `import()` 函数动态加载子组件，并将其返回的 `Promise` 对象作为参数传递给 `defineAsyncComponent` 函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值