[Vue 警告]：未知的自定义元素：<app> - 您是不是正确注册了组件？ （在 <Root> 中找到）
Posted
技术标签:
【中文标题】[Vue 警告]：未知的自定义元素：<app> - 您是不是正确注册了组件？ （在 <Root> 中找到）【英文标题】：[Vue warn]: Unknown custom element: <app> - did you register the component correctly? (found in <Root>)[Vue 警告]：未知的自定义元素：<app> - 您是否正确注册了组件？ （在 <Root> 中找到） 【发布时间】：2020-02-07 01:30:58 【问题描述】：我正在尝试在 Laravel 6 中设置 Vue。
我跑过：
作曲家需要 laravel/ui
php artisan ui vue
npm install && npm run dev
然后在welcome.blade.php 中，我删除了欢迎页面的正文并添加了一个id 为root 的div。
我可以让示例组件显示在浏览器中，但我无法创建任何新组件并让它们显示而不会出现错误。我什至尝试重命名示例组件，即使这样也行不通。我将文件重命名为 App.vue，然后重命名了其他所有内容 - 见下文：
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('app', require('./components/App.vue').default);
const app = new Vue(
el: '#app',
);
welcome.blade.php
<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="csrf_token()">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Journey To Dev</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src=" asset('js/app.js') "></script>
</body>
</html>
App.vue 与 ExampleComponent.vue 没有变化，我只是重命名了文件：
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default
mounted()
console.log('Component mounted.')
,
</script>
谢谢！
【问题讨论】：
尝试再次运行npm run dev 并硬刷新页面
Vue warn: Unknown custom element: <myCompont> - did you register the component correctly?的可能重复
【参考方案1】：
你需要运行
npm run dev
每次更改 javascript 资产或 Vue 组件时，Webpack 都会将它们重新编译为 public/js/app.js
或者更好的是，启动一个观察器并在你更改代码时让它重新编译
npm run watch
并确保硬刷新或让开发工具控制台保持打开状态，以便禁用缓存
你也可以像这样自动注册组件
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
而不是
Vue.component('app', require('./components/App.vue').default);
希望对你有帮助
【讨论】：
我已经跑了几次 npm run dev 了，然后跑了 npm run watch 如果您在更改文件后运行它并在浏览器中的私人窗口上进行测试，它应该可以工作...我只是在问题中复制了您的代码，它确实工作 硬刷新刚刚奏效！！即使我已经硬刷新了大约 10 次！非常感谢 很高兴，如果有帮助，请考虑接受答案 谁知道¯\_(ツ)_/¯以上是关于[Vue 警告]：未知的自定义元素：<app> - 您是不是正确注册了组件？ （在 <Root> 中找到）的主要内容，如果未能解决你的问题，请参考以下文章
Laravel Vuejs [Vue 警告]：未知的自定义元素：<router-link>