Laravel 8集成Vue.js后页面空白、组件无法显示问题求助

让我们一步步排查并修复你的Vue组件无法渲染导致的空白页问题：

1. 首先检查Vue版本兼容性 #

Laravel 8配套的Laravel Mix 6默认使用Vue 3，但你的app.js代码是Vue 2的语法（new Vue({ el: '#app' })），这会导致版本不匹配的核心错误。

解决方案二选一： #

方案A：升级代码到Vue 3语法

修改resources/js/app.js为Vue 3的标准写法：

require('./bootstrap');
import { createApp } from 'vue';
// 导入组件
import MainApp from './components/TestApp.vue';

// 创建并挂载Vue应用
const app = createApp({});
app.component('main-app', MainApp);
app.mount('#app');

方案B：指定Mix使用Vue 2

如果想继续使用Vue 2生态，修改webpack.mix.js明确指定Vue版本：

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .vue({ version: 2 }); // 新增这一行指定Vue 2

修改后重新运行以下命令完成依赖安装与编译：

npm install
npm run dev

2. 验证资源编译与路径正确性 #

• 运行npm run dev后，检查public/js/app.js是否生成，且文件大小合理（不是几KB的空文件）。
• 把blade模板里的资源引用从asset()改为mix()，因为Mix会生成带哈希的资源文件，mix()能自动匹配最新的编译结果：
  修改views/testpage.blade.php中的script标签：

<script src="{{ mix('js/app.js') }}"></script>

确保public/mix-manifest.json文件存在（运行npm run dev会自动生成）。

3. 检查浏览器控制台的报错信息 #

按下F12打开浏览器开发者工具，切换到Console标签，刷新页面：

• 如果看到Vue is not defined：说明Vue没有被正确引入，大概率是版本不匹配的问题，回到第一步解决。
• 如果看到组件找不到的错误：检查TestApp.vue的路径是否正确（确认在resources/js/components/目录下），组件注册名称是否和模板中的标签一致。

4. 确认组件标签的正确性 #

在DOM模板中，Vue会自动将kebab-case标签转换为PascalCase组件名，你的<main-app>标签和注册的main-app组件是匹配的，这部分没问题，但要确保没有拼写错误。

完成以上步骤后，重新运行npm run watch，刷新页面应该就能看到Vue组件渲染的内容了。

内容的提问来源于stack exchange，提问作者Kamel Magdy