我正在使用 Laravel 10 并已使用 Vue 设置 Laravel Breeze。
我的 Vue 组件内的内容不可见。 我已经浏览了很多链接和教程，但没有一个与我所做的有所不同。
控制台中也没有错误。
这是我的设置和配置文件。
Composer.json
"require": {
"php": "^8.1",
"guzzlehttp/guzzle": "^7.2",
"laravel/breeze": "^1.23",
"laravel/framework": "^10.10",
"laravel/sanctum": "^3.2",
"laravel/tinker": "^2.8"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/pint": "^1.0",
"laravel/sail": "^1.18",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^7.0",
"phpunit/phpunit": "^10.1",
"spatie/laravel-ignition": "^2.0"
},
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
"@vitejs/plugin-vue": "^4.3.4",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.8.0",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"npm-watch": "^0.11.0",
"vue": "^3.2.36",
"vue-loader": "^17.2.2",
"vue-router": "^4.0.13"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
app.js
导入'./bootstrap';
import { createApp } from "vue";
import ExampleComponent from './components/Examplecomponent.vue'
createApp({
components: {
ExampleComponent,
}
}).mount('#app')
示例组件.vue
<template>
<div>
this is example vue 3
</div>
</template>
welcome.blade.php
<body class="antialiased">
<h1>Hello</h1>
<div id="app">
hi...
<example-component></example-component>
</div>
</body>
在浏览器中构建后，可以检查网页。
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="preload" as="style" href="http://127.0.0.1:8000/build/assets/app-993b5797.css"><link rel="modulepreload" href="http://127.0.0.1:8000/build/assets/app-12031083.js"><link rel="stylesheet" href="http://127.0.0.1:8000/build/assets/app-993b5797.css"><script type="module" src="http://127.0.0.1:8000/build/assets/app-12031083.js"></script> </head>
<body class="antialiased">
<h1>Hello</h1>
<div id="app" data-v-app=""><!----></div>
不确定我缺少什么，vue组件内容没有显示，而且我在控制台中没有看到任何错误。
啊..明白了。 我缺少的是必须导入 createApp 函数的位置。
这是 app.js 中所需的更改
import { createApp } from "vue/dist/vue.esm-bundler";
希望这对一些开发人员有帮助。