文章目录

可能出现问题的情况
- 情况一：路径问题
- 情况二：每个组件的name 值
- 情况三：驼峰命名法问题
- - 方式一：
  - 方式二：
- 情况四：vue1.0和2.0的写法不同
- 情况五：组件中含有 style 标签
- 情况六：省略了index.vue
- 情况七：使用 webpackChunkName
- 情况八：routes/index.js中，函数调用
- - 错误情况
  - 正确情况
排错方式
- 安装vue-tools
- 使用未压缩的vue.js
参考链接：

可能出现问题的情况

情况一：路径问题

引入路径不能使用加号进行字符串与变量的拼接，应使用 ``

# 错误示例：
function view(name) {return () => import('../pages/'+name)
}# 正确示例：
function view(name) {return () => import(`../pages/${name}`)
}

情况二：每个组件的name 值

参考链接：https://blog.csdn.net/weixin_41790566/article/details/107520109

情况三：驼峰命名法问题

见vue官网：https://vuejs.org/v2/guide/components-registration.html#Name-Casing

方式一：

声明：MyChild
使用：<my-child></my-child> 或 <MyChild>

方式二：

声明：mychild
使用：<mychild>

情况四：vue1.0和2.0的写法不同

1.0中

new Vue({el: '#app',components: { App }
});

2.0应该加一行

new Vue({el: '#app',template: '<App/>',components: { App }
});

情况五：组件中含有 style 标签

解决：删除 style

情况六：省略了index.vue

错误示例：
let userIdx = () => import('./views/user');正确示例：
let userIdx = () => import('./views/user/index.vue');

情况七：使用 webpackChunkName

## 添加 webpackChunkNamecomponents: {maingraph: ()=>import(/* webpackChunkName: "maingraph" */ "../components/echartself/maingraph"),},

情况八：routes/index.js中，函数调用

错误情况


const view = function (name) {return () => import(`../pages/${name}`)
}
const routes = [{path: '/home',name: 'app-home',component: view('home.vue'),}},

正确情况


const view = function (name) {return () => import(`../pages/${name}.vue`)   # 此处更改
}
const routes = [{path: '/home',name: 'app-home',component: view('home'),    # 此处更改}},

排错方式

安装vue-tools

https://github.com/vuejs/vue-devtools

使用未压缩的vue.js

参考链接：

https://github.com/JeffreyWay/laravel-mix/issues/2064

【Vue】 Error with Vue lazy loading components: “Failed to resolve async component“相关推荐

【Vue Laravel-mix】Error with Vue lazy loading components: “Failed to resolve async component“
[Vue Laravel-mix] 报错信息: Error with Vue lazy loading components: "Failed to resolve async compon ...
【笔记】Error while loading PyV8 binary: exit code 1解决方法
[笔记]Error while loading PyV8 binary: exit code 1解决方法参考文章: (1)[笔记]Error while loading PyV8 binary: e ...
【毕业设计】基于springboot + vue微信小程序商城
目录前言创新点/亮点✨ 毕设目录一.视频展示二.系统介绍三.项目地址四.运行环境五.设计模块 ①前台 ②后台六.系统功能模块结构图七. 准备阶段 ①使用真实支付 ②使用模拟支付八. ...
【vue】解决使用vue，导致jq插件失效的问题
[vue]解决使用vue,导致jq插件失效的问题参考文章: (1)[vue]解决使用vue,导致jq插件失效的问题 (2)https://www.cnblogs.com/cindy2035/p/10 ...
【毕业设计】基于Springboot+vue.js的校园二手商城系统
此为原创合作开发项目 [毕业设计]基于springboot+vue.js的校园二手商城系统一.综述二手市场在中国是一个不够完善和成熟的市场,尤其在大学校园内.随着经济的发展,大学生生活水平的不断提 ...
【异常】Error: ERROR 1012 (42M03): Table undefined. (state=42M03,code=1012)
[异常]Error: ERROR 1012 (42M03): Table undefined. (state=42M03,code=1012) 参考文章: (1)[异常]Error: ERROR 10 ...
【MySQL】ERROR 1045 (28000): Access denied for user的解决方法
[MySQL]ERROR 1045 (28000): Access denied for user的解决方法参考文章: (1)[MySQL]ERROR 1045 (28000): Access de ...
QT5对话框的中文字符串【乱码】 (error: C2001: 常量中有换行符)
问题解决:对话框的中文字符串[乱码] (error: C2001: 常量中有换行符) 假设编译环境:QT5+vs2015 项目配置: 默认编码:UTF-8 UTF-8 BOM: 目前存在了则保留如果 ...
【Koa】Error: Cannot find module ‘koa-router‘
[Koa]Error: Cannot find module 'koa-router' 报错如下解决办法执行以下命令安装koa-router 即可解决此问题 npm install koa-ro ...

【Vue】 Error with Vue lazy loading components: “Failed to resolve async component“