文章目錄

• 可能出現問題的情況
• • 情況一：路徑問題
  • 情況二：每個組件的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“的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。