Laravel 5.6 Vue.js项目迁移后显示空白页问题求助

API 探路者

2026-5-25

这种跨环境的空白页问题我碰到过好几次，咱们一步步排查：

排查步骤

1. 先看浏览器控制台的错误信息

这是最关键的！空白页90%以上能在控制台找到线索，比如资源加载失败、JS语法错误、API请求失败之类的。打开Chrome/Firefox的开发者工具（F12），切换到Console和Network标签，看看有没有红色报错或者404资源。

Laravel里Vue的生产构建必须用npm run prod，而不是npm run dev或者npm run watch——dev模式的代码是未压缩且带开发提示的，生产环境必须用prod生成优化后的文件。你可以在Ubuntu上重新跑一遍：

npm install
npm run prod

另外，检查public/js/app.js和public/css/app.css是否生成，文件大小是不是正常（prod构建后js应该是压缩过的，体积小很多）。

跨环境迁移后，Laravel的视图、配置、路由缓存可能会导致资源路径不对。执行以下命令清除缓存：

php artisan cache:clear
php artisan config:clear
php artisan view:clear
php artisan route:clear

如果之前在生产环境运行过php artisan config:cache，记得先清掉旧缓存再重新配置缓存。

Ubuntu的权限管控比Mac严格很多，尤其是storage、bootstrap/cache和public目录，web服务器用户（比如www-data）需要有读写权限。执行以下命令调整：

sudo chown -R www-data:www-data storage bootstrap/cache public
sudo chmod -R 755 storage bootstrap/cache public

有时候代码里会根据process.env.NODE_ENV做逻辑判断，比如开发模式加载mock数据、生产模式请求真实API，如果环境变量没配置对，可能导致逻辑崩溃。检查.env文件里的APP_ENV是否为production。

另外，确认webpack.mix.js的public路径配置正确，避免资源生成路径错误：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .setPublicPath('public');

如果你的Vue是单页应用（SPA），需要Laravel配置兜底路由指向Vue入口视图。检查routes/web.php里是否有类似配置，且该路由是最后一个定义的：

Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

同时检查Vue路由配置里有没有路径拼写错误、组件加载失败的情况。

Mac和Ubuntu上的Node版本差异可能导致依赖包运行异常。分别在两台机器上运行node -v和npm -v查看版本，如果差异较大，建议用nvm在Ubuntu上安装和Mac一致的Node版本：

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 重启终端后安装对应版本，比如v14.21.3
nvm install 14.21.3
nvm use 14.21.3

之后重新安装依赖并构建。

如果以上步骤都试过还是不行，把浏览器控制台的错误信息、npm run prod的输出日志贴出来，这样更容易定位问题。

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