运行简易Laravel Vue应用时出现空白屏及404错误求助

环境信息 #

• Laravel Framework 11.5.0
• Node v22.0.0、npm 10.5.1
• Homestead开发环境

问题背景 #

通过laravel/ui搭建Vue项目后，执行npm run dev构建资源，访问页面时出现空白屏，控制台提示js/app.js 404加载失败。

解决步骤 #

1. 替换资源引用指令 #

打开resources/views/welcome.blade.php，将原有的脚本引用：

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

替换为Vite官方提供的资源引用指令：

@vite(['resources/js/app.js'])

原因：Laravel 11默认使用Vite作为构建工具，编译后的资源会存放在public/build目录且文件名带哈希值，asset()无法直接定位到正确文件，@vite指令会自动处理资源路径和版本哈希。

2. 确认Vite配置完整性 #

检查项目根目录的vite.config.js，确保已引入Vue插件，配置示例如下：

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,
                },
            },
        }),
    ],
});

如果缺少@vitejs/plugin-vue，执行以下命令安装：

npm install @vitejs/plugin-vue --save-dev

3. 重新构建资源 #

执行构建命令重新生成资源：

npm run dev

生产环境请使用：

npm run build

4. 清除缓存（可选） #

若仍存在问题，清除Laravel缓存确保视图和配置更新：

php artisan cache:clear
php artisan view:clear

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