vue加载组件报错说提前加载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue加载组件报错说提前加载相关的知识,希望对你有一定的参考价值。

参考技术A vue动态路由加载组件时报错,这是以前的代码 这样写是没有问题的,

component = resolve => import(`@/views/$component`)
但是webpack4中动态import不支持变量方式,问题就来了

百度到的解决办法是将import引入改为require引入,

component = resolve => require([`@/views/$view.vue`], resolve)
不知道为什么这样改了之后项目仍然报错,改成下面这种写法才解决了问题,(有人能解释一下吗?)

// path格式为 views/todoTask/index;
// views前面不能带 /,否则仍会报错
component = resolve => require([`@/$

vue3 动态加载组件动态引入组件

1.问题
在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来。

2.分析
根据上面的报错提示,让我们安装并使用:@rollup/plugin-dynamic-import-vars 这个插件(最终没有这个方案)。

Vite官方文档说需要使用Glob 导入形式,然后看了一个Glob的文档,解决了这个问题(亲测可行)。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块:

const modules = import.meta.glob('../views/*/*.vue');

他会匹配并导入所有相关的组件:

// vite 生成的代码
const modules = 
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')

那么回到项目中,在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件

因此,根据vite的import.meta.glob函数:就可以获得对应的custom_components文件夹下的.vue文件

const changeComponents = (e:string)=>
	const link = modules[`../custom_components/$e.vue`]
	console.log(link,'link')

打印link可以看到

最后就是异步注册组件

layouts.value = markRaw(defineAsyncComponent(link))

3.最后
下面贴出完整案例,仅供参考。有更好的或者需要优化的可以提问一起探讨。

<template>	
	<div @click="changeComponents('kk')">显示kk.vue</div>
	<div @click="changeComponents('index')">显示index.vue</div>
	<component :is="layouts"/>
</template>

<script lang='ts' setup>
	const modules = import.meta.glob('../custom_components/*.vue');
	let layouts = ref<any>(null)
	const changeComponents = (e:string)=>
		const link = modules[`../custom_components/$e.vue`]
        layouts.value = markRaw(defineAsyncComponent(link))
	
</script>

以上是关于vue加载组件报错说提前加载的主要内容,如果未能解决你的问题,请参考以下文章

vue中动态加载图片报错

vue 图片加载完成事件

Axios 响应数据未加载到 Laravel 中的 Vue 组件上

vue加载完成后的回调函数方法

vue加载完成后的回调函数方法

vue3 动态加载组件动态引入组件