本地Laravel项目移动端访问时CSS与JS加载失败问题

1. 修正资源路径配置 #

核心问题是资源引用路径用了localhost，移动端访问时无法解析这个地址，得改成电脑的局域网IP：

• 打开项目根目录的.env文件，把APP_URL设置为你的电脑局域网IP+端口，比如：

  APP_URL=http://192.168.1.105:8000
  

• 如果你用的是Laravel 9+的Vite工具：
  模板里保持用@vite指令加载资源，比如：

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

  重启php artisan serve，Vite会自动根据APP_URL生成正确的资源路径。
• 如果你用的是Laravel 8及以下的Mix工具：
  先重新编译资源：

  npm run dev
  

  模板里用mix()加载：

  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  <script src="{{ mix('js/app.js') }}"></script>
  

2. 排查网络与权限问题 #

• 确保移动端和电脑在同一个WiFi局域网内
• 检查电脑防火墙是否允许8000端口（或你指定的其他端口）的入站请求

3. 清除缓存更新配置 #

执行以下命令清除框架缓存，确保新的APP_URL生效：

php artisan config:clear
php artisan cache:clear

如果单独开了Vite开发服务器（npm run dev），也重启一下它。

4. 临时绝对路径测试（可选） #

如果以上方法没效果，可以直接在模板里写死绝对路径验证资源是否能访问，比如：

<link rel="stylesheet" href="http://192.168.1.105:8000/build/assets/app-xxxxxx.css">
<script src="http://192.168.1.105:8000/build/assets/app-xxxxxx.js"></script>

替换成你实际的资源文件名和IP端口，能加载的话再回到框架的资源加载方式排查配置问题。

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