我已经尝试了我能想到的一切，但尽管没有构建错误，我仍然无法在我非常简单的项目中加载Vue组件。我不明白为什么，但我只是得到一个空白页时，试图查看页面与Laravel服务。
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="antialiased">
<div id='app'>
<Home />
</div>
<script scr="{{ asset('js/app.js') }}"></script>
</body>
</html>字符串
app.js
require('./bootstrap');
import { createApp } from 'vue'
import Home from './components/Home.vue';
const app = createApp({});
app.component('home', Home);
app.mount('#app');型
Home.vue
<template>
<div>
<h1> WELCOME </h1>
</div>
</template>型
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);型
4条答案
按热度按时间wfsdck301#
您确定
app.component('home', Home);行是导入伴奏正确方法吗？因为据我所知，这是字符串
这应该是个办法
pcrecxhr2#
您是否尝试将刀片式服务器中的标记从
<Home />更改为<home />？必须在导入组件的行中添加.defaultgcxthw6b3#
基本上需要添加一些我添加到app.js的东西到.vue文件中才能让它工作，比如从vue导入。
l2osamch4#
这是一个老问题，但据我所知，你还没有收到一个令人满意的答复/解决方案。
我也遇到了同样的问题/一个非常类似的升级一个非常老的Laravel项目（大约9年前开始在一个旧的Laravel版本上）从AngularJS到Vue 3：尽管进行了所有尝试和非常准的设置，Vue根应用程序组件没有加载。
解决方案是确保“main”app.js文件是使用script defer标记加载的。因此，在刀片文件中，更改：
字符串
至
型
作为旁注，在您最初的问题中，这一行有一个错字：将脚本scr改为脚本src：-）