Laravel单个Blade页面通过npm集成Vue遇404错误求助

你遇到的GET http://localhost:3001/vue 404错误，核心原因是Blade页面里的import { createApp } from '/vue'路径完全错误——npm安装的Vue存放在项目node_modules目录中，Vite不会将其暴露为根路径下的/vue资源，自然会返回404。此外你的配置还有几处细节错误，以下是完整修复步骤：

1. 修正Vite配置的入口文件名 #

你的vite.config.js中输入的入口文件是resources/js/apps.js，但实际入口文件是app.js，这会导致Vite无法正确加载脚本：

import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

// 移除不需要的react插件（你并未使用React）
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js', // 修正为正确的入口文件名
            ],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '$': 'jQuery',
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

2. 调整app.js的配置（优化全局可用Vue） #

如果你想在Blade页面中直接编写Vue代码，可以将Vue的createApp方法暴露到全局，避免重复导入：

import './bootstrap';
import { createApp } from 'vue'

// 将createApp挂载到window对象，方便Blade脚本直接调用
window.createApp = createApp;

// 移除重复的实例挂载逻辑（后续在Blade中单独挂载）
// const app = createApp()
// app.mount('#app')

3. 修复Blade页面的脚本与容器错误 #

删掉错误的import语句，同时修正容器选择器（mount('#app')匹配的是id而非class）：

<div id="app"> <!-- 修正为id="app"，匹配mount的选择器 -->
    @{{ state }}
</div>

<script type="module">
    // 直接使用全局暴露的createApp
    createApp({
        data() {
            return {
                state: true,
            };
        },
        mounted() {
            console.log("life works");
            console.log(window.Echo);
            window.Echo.channel('chats')
                .listen('TestRevertWorks', (e) => {
                    console.log(e.message);
                });
        }
    }).mount('#app');
</script>

可选方案：如果不想暴露全局，也可以直接从npm包导入：import { createApp } from 'vue';，效果一致。

4. 确保Vite开发服务器正常运行 #

在项目根目录执行启动命令：

npm run dev

访问Laravel应用时，直接使用Laravel的默认端口（如http://localhost:8000）即可，@vite指令会自动处理与Vite开发服务的代理。

5. 验证依赖安装有效性 #

若之前存在依赖冲突，可删除node_modules和package-lock.json后重新安装：

rm -rf node_modules package-lock.json
npm install

• 不要同时在app.js和Blade脚本中挂载同一个#app元素，会导致Vue实例冲突。
• 若后续需要使用.vue单文件组件，可直接在app.js中导入并注册，再在Blade中使用组件标签。

内容的提问来源于stack exchange，提问作者paul kendal23