我有一个全新安装的Laravel Mix，我正在尝试在项目中设置延迟加载组件。我已经使用babel插件'syntax-dynamic-import'进行了正确的设置，因此app.js中的import语句按预期工作。当我尝试将延迟加载的组件与vue-router一起使用时，会出现此问题。
我的app.js文件如下所示：
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const EC = () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue');
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: EC }
]
});
const app = new Vue({
router,
el: '#app'
});
和我的welcome.blade.php文件看起来像这样：
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<base href="/" />
</head>
<body>
<div id="app">
<h1>Base title</h1>
<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
所以我只是尝试着陆根路径并显示示例组件。示例组件包含在welcome.blade.php文件中。
我在控制台中收到此错误：
[Vue warn]: Unknown custom element: <example-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
我想我错过了一些简单的东西，任何建议都表示赞赏。
首先，我认为你将路线概念与核心组件vue概念混合在一起......
尝试直接在您的vue应用程序中加载组件...
const app = new Vue({
router,
el: '#app',
components: {
'example-component': () => import('./components/ExampleComponent.vue')
}
});
使用<component>完成组件加载
<component v-bind:is="currentTabComponent"></component>
查看文档，了解有关动态组件的更多信息：https://vuejs.org/v2/guide/components-dynamic-async.html
@Erubiel的答案确实有效，但它仍然不是我想要的设置。当我尝试使用vue-router时，我需要通过删除对组件的显式调用并在welcome.blade.php文件中添加标记来更新视图。现在这意味着我的路线被注入该空间。更新的区域是：
...
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
...