[Vue 警告]：无法解析组件：应用程序位于 <App> Laravel 8 & Vue 3

Question

我有以下问题，当我在某处使用 Vue 3 和 Laravel 时，这个问题对我重复了很多次。我才刚刚开始，有一个几乎干净的应用程序，仍然可以看到这个问题存在。也就是说，来自 Laravel 8 的 Vuejs 3 不适合我。我在控制台中收到错误消息：

[Vue warn]: Failed to resolve component: app at app.js:13797

app.js

require('./bootstrap');

import { createApp } from 'vue';

import App from './App.vue';
const app = createApp({App});
app.mount("#app");

App.vue

<template>
  <h1>{{ greeting }}</h1>
</template>

<script>
export default {
  setup: () => ({
    greeting: 'Hello World from Vue 3!'
  })
}
</script>

<style scoped>

</style>

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css', {}, [tailwindcss('./tailwind.config.js')])
    .version();

welcome.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>Document</title>
</head>
<body>
<div id="app">
<app>

</app>
</div>
<script src="{{ url('js/app.js') }}"></script>
</body>
</html>

请帮我解决这个问题。 :)

Answer 1

应该是createApp(App)，而不是{App}，这是{App: App}的shorthand。

[Vue 警告]：无法解析组件：应用程序位于 <App> Laravel 8 & Vue 3

[Vue warn]: Failed to resolve component: app at <App> Laravel 8 & Vue 3

laravel

vuejs3

laravel-8

laravel-mix-vue3