Laravel 9.3项目集成React后JS资源加载404问题求助

1. 修正模板中的资源引入代码 #

你同时混用了传统asset()方法和Vite专属指令，这是核心问题。直接删除旧的<script>标签，只保留Vite相关指令：

@viteReactRefresh
@vite(['resources/js/app.js', 'resources/sass/app.scss'])

由于你的vite.config.js已经配置了input数组，也可以简化为：

@viteReactRefresh
@vite

2. 启动Vite开发服务器 #

Laravel + Vite开发时需要同时运行两个服务：

• 保持php artisan serve运行（Laravel主服务）
• 新开终端执行npm run dev启动Vite开发服务器（默认端口5173）

Vite开发模式下不会把资源编译到public/js目录，而是通过开发服务器动态提供资源，必须启动它才能加载到正确路径。

3. 验证.env配置 #

确保.env文件中的APP_URL和Laravel服务地址一致：

APP_URL=http://127.0.0.1:8000

Vite会依赖这个地址生成正确的资源加载路径。

4. 生产环境部署注意事项 #

如果是部署到生产环境，先执行编译命令：

npm run build

编译后的资源会打包到public/build目录，此时@vite指令会自动加载生产环境的资源文件，无需手动修改路径。

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