Laravel+Vite局域网开发：PC及移动端CSS加载失败问题解决

问题场景 #

使用Vite作为前端工具开发Laravel应用，尝试在同一Wi-Fi网络下的PC和移动设备上测试站点，当前配置如下：

• Laravel通过命令 php artisan serve --host=0.0.0.0 运行在8000端口
• Vite通过命令 npm run dev 运行在3000端口，提供前端服务

可以通过PC的IP地址（http://192.168.x.x:8000）在手机上访问站点，但PC和手机上的CSS均无法加载。

已尝试的排查措施：

• 检查HTML中CSS文件路径是否正确
• 在vite.config.js中配置host: 0.0.0.0以允许外部连接
• 验证PC防火墙设置（已临时关闭防火墙）
• 执行npm run build后重新加载站点
• 确认Laravel的.env文件中APP_URL=http://localhost:8000配置正确
• 清除PC和手机的浏览器缓存

浏览器未显示明显错误，但CSS始终无法加载。

补充报错信息 #

修改APP_URL后问题仍未解决，尝试直接访问CSS文件时出现404错误，浏览器控制台出现以下报错：

Blocked cross-origin request (CORS): The origin policy does not allow reading the remote resource from http://[::]:5173/@vite/client. Reason: CORS request failed. Status code: (null).
The source URI of the module is not allowed in this document: http://[::]:5173/@vite/client.

解决方法 #

只需在vite.config.js中添加指定PC本地IP的server配置即可解决问题：

server: {
        host: '192.168.x.xx', // 替换为你的PC在当前Wi-Fi网络下的实际IP地址
    },

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