Laravel中Vue.js注册App组件报错：未知自定义元素<app>

嘿，我一眼就看穿问题啦！你碰到的这个[Vue warn]: Unknown custom element: <app>错误，主要有两个核心原因，咱们一步步来解决：

核心问题分析 #

1. 重复渲染根组件：你在app.js里已经通过render: h => h(App)把App组件指定为Vue实例的根组件，并且挂载到了#app容器上。这时候Vue会自动把App组件的内容渲染到<div id="app"></div>里，根本不需要在Blade模板里再写<App></App>标签。
2. 未全局注册组件：你定义的App组件只是作为根组件传入Vue实例，并没有通过Vue.component()全局注册，所以Vue无法识别Blade里的<App>自定义标签。

解决方案 #

步骤1：修改Blade模板 #

把Blade里的<App></App>标签删掉，只保留挂载用的容器：

<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>

步骤2：修复app.js里的小错误 #

你的VueRouter配置里的mode: history少了引号，history是字符串，应该写成'history'，不然会因为未定义变量报错：

require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'

Vue.use(VueRouter);
Vue.use(Vuex);

// 修复mode的引号问题
const router = new VueRouter({ routes, mode: 'history' });

Vue.config.devtools = true;
new Vue({ router, render: h => h(App) }).$mount('#app');

额外说明 #

如果之后你需要在其他组件里复用App组件（虽然一般根组件不会这么用），可以在app.js里全局注册它：

Vue.component('App', App);

但在当前场景下完全没必要，因为根组件已经通过render函数自动渲染到#app容器里了。

这样修改后，刷新页面应该就能正常显示App.vue里的内容，控制台的错误也会消失啦！

内容的提问来源于stack exchange，提问作者Loviisa Lampinen