Angular 5与Laravel5.5部署后页面刷新404问题求助

这个问题我太熟了——本质是前端路由和后端路由的冲突：Angular是单页应用（SPA），平时页面跳转都是前端JS处理，不会请求服务器；但刷新时浏览器会直接向Laravel服务器发起对应URL的请求，而Laravel的路由表里根本没有这条路径，自然就返回404了。下面是具体的修复步骤，一步步来就行：

1. 配置Laravel路由，转发所有非静态请求到Angular入口 #

打开routes/web.php，在所有其他web路由的最后添加这条通配符路由（一定要放在最后，不然会覆盖你原本的Laravel路由）：

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

这里的index对应的是Laravel视图目录下的index.blade.php，你需要把Angular build后的index.html内容复制到这个blade文件里，或者直接在blade里引入编译好的Angular资源（比如public/js、public/css里的文件）。

2. 确保Angular的base href配置正确 #

Angular需要知道自己的根路径，不然资源加载会出问题。执行ng build时指定base href：

# 如果你的Laravel项目在域名根目录
ng build --base-href / --output-path ../../../public/
# 如果是子目录，比如http://your-domain.com/laravel-app/
ng build --base-href /laravel-app/ --output-path ../../../public/

--output-path是把Angular编译后的产物直接输出到Laravel的public目录，这样Laravel能直接访问到这些静态资源。

3. 调整服务器重写规则 #

如果你用Apache #

打开Laravel根目录下的public/.htaccess，在RewriteEngine On之后添加以下规则，确保所有非文件/非目录的请求都转发给index.php：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Laravel默认的.htaccess可能已经有类似规则，但可以检查一下是否完整。

如果你用Nginx #

在你的Nginx服务器配置里，找到对应Laravel项目的server块，添加这条location规则：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

这条规则会让Nginx先尝试访问文件或目录，找不到的话就转发给index.php，交给Laravel路由处理。

额外注意事项 #

• 如果你有Laravel的API路由，建议放在routes/api.php里（默认前缀是/api），这样不会被上面的通配符路由覆盖；
• 测试前记得清空浏览器缓存，避免旧的路由缓存影响结果；
• 如果你的Angular项目有自定义路由，确保Angular的路由配置里使用的是PathLocationStrategy（默认就是这个，不用改），而不是HashLocationStrategy（带#的路由，虽然不会有刷新404问题，但URL不够美观）。

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