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

最新推荐文章于 2024-05-09 15:10:42 发布

今日之风甚是温和

最新推荐文章于 2024-05-09 15:10:42 发布

阅读量6k

点赞数 2

分类专栏： Web 文章标签： vue

本文链接：https://blog.csdn.net/qq_22227087/article/details/113668008

版权

Web 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文详细列举了在Vue.js应用中可能遇到的组件加载和路径问题，包括路径错误、组件name属性、驼峰命名、Vue版本差异、style标签处理、缺少index.vue、webpackChunkName设置以及路由配置错误等常见问题，并提供了相应的解决方案和排错方法，如使用未压缩的vue.js和vue-tools辅助开发。

摘要由CSDN通过智能技术生成

可能出现问题的情况

情况一：路径问题

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

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

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

情况二：每个组件的name 值

参考链接：https://blog.csdn.net/weixin_41790566/article/details/107520109
原文：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

## 添加 webpackChunkName

 components: {
    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'),    # 此处更改
    }
  },