Laravel 8 Mix项目迁移至Windows 10 XAMPP后空白屏问题求助

核心问题分析 #

页面能输出源码但静态资源（JS、CSS、图片）找不到，说明PHP渲染逻辑正常，但Mix编译的资源要么未在本地生成，要么路径配置错误，进而导致页面因缺少样式和脚本显示空白。

具体解决步骤 #

1. 安装Node.js及前端依赖 #

Laravel Mix依赖Node.js，先安装适配Laravel 8的Node.js版本（推荐12.x-16.x），然后在项目根目录执行：

npm install

该命令会拉取package.json中定义的所有前端依赖，包括Mix编译工具。

2. 重新编译静态资源 #

在项目根目录执行Mix编译命令，生成所需的静态资源文件：

npm run dev  # 开发环境编译（不压缩，便于调试）
# 生产环境可执行 npm run prod

编译完成后，项目public目录下会自动生成js、css文件夹及对应编译文件（如app.js、app.css）。

3. 修正.env中的APP_URL配置 #

打开项目根目录的.env文件，确保APP_URL与本地XAMPP的访问路径一致，例如：

APP_URL=http://localhost/你的项目目录名

Laravel的mix()、asset()辅助函数会基于该URL生成资源路径，配置错误会直接导致资源链接指向无效地址。

4. 修复Windows文件权限 #

Windows下XAMPP的Apache进程可能缺少public目录的读写权限，右键项目的public文件夹，选择属性→安全，给Authenticated Users或Everyone添加读取和写入权限。

5. 清除缓存并重新生成资源清单 #

如果存在编译缓存，执行以下命令清理后重新编译：

php artisan view:clear
# 手动删除public/js、public/css文件夹（若未配置clean命令）
npm run dev

同时检查public/mix-manifest.json文件，确认其中的资源路径与页面源码中的链接一致，示例如下：

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

6. 配置XAMPP虚拟主机（可选） #

若使用自定义域名访问，修改XAMPP的httpd-vhosts.conf文件，添加虚拟主机配置：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/你的项目/public"
    ServerName laravel.local
</VirtualHost>

同时修改系统hosts文件（路径：C:\Windows\System32\drivers\etc\hosts），添加：

127.0.0.1 laravel.local

通过自定义域名访问可避免多层目录导致的路径混乱。

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