Vue 组件未显示在我的 Laravel 刀片页面中
Posted
技术标签:
【中文标题】Vue 组件未显示在我的 Laravel 刀片页面中【英文标题】：Vue component not showing up in my Laravel blade page 【发布时间】：2021-09-20 11:12:46 【问题描述】：App.js 文件：
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue(
el: '#app',
);
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">
<meta name="csrf-token" value=" csrf_token() " />
<link rel="stylesheet" href=" mix('css/app.css') " />
<script defer src=" mix('js/app.js') "></script>
<title>Chat Deneme</title>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
ExampleComponent.vue：
<template>
<div>Hello, Example Component!</div>
</template>
<script>
export default
name:'example-component',
mounted()
console.log('Example component mounted.')
;
</script>
我使用 npm install --save-dev vue vue-template-compiler 来下载 vue。
webpack.mix：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction())
mix.version();
我同时做了 npm run watch、npm run dev、npm run hot 但没有错误。我的页面和控制台是空白的。
【问题讨论】：
我把 改成了 在我的 Blade.php 文件中，但现在我在控制台中收到此错误：找不到元素：#app 【参考方案1】：我通过在我的 Blade.php 文件中添加延迟到脚本标记解决了这个问题，并且我在 app.js 中包含组件时添加了默认值。这是最终的 app.js
require('./bootstrap');
// Require Vue
window.Vue = require('vue').default;
// Register Vue Components
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// Initialize Vue
const app = new Vue(
el: '#app',
);
【讨论】：
以上是关于Vue 组件未显示在我的 Laravel 刀片页面中的主要内容，如果未能解决你的问题，请参考以下文章
vuejs 组件未在我的 laravel 5.3 刀片页面中呈现
LARAVEL + Vue.js：使用刀片在 MPA 中显示整个页面的 vue.js 组件，对 SEO 不友好