可能出现问题的情况

情况一：路径问题

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

# 错误示例：
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

## 添加 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'),    # 此处更改
    }
  },

排错方式

安装vue-tools

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

使用未压缩的vue.js

参考链接：

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