项目:laravel + vue 实现前后端分离。
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

没有特别的要求的话,hash模式亦正常访问。好嘛,产品要求URL要像正常那样的 —— history模式的。看看vue文档,要实现vue history模式也很简单。vue 切换一下模式,本地测试ok啦。
接下来,看到还需要后台配置支持:

因为VUE应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

So,Nginx配置一下:


location / {
try_files $uri $uri/ /index.html;
}

没错,部署前端资源Nginx服务器上,简单加上一条通用匹配规则。
至此,vue 前端搞定了,但是。。。还是不行的!
原因是从前端服务器访问是正常了,但是域名指向的是后端服务器,所以当vue router history模式url直接访问时还是会404.
当到这里,又回头排查一下是不是前面哪里搞错了,仔细看下来,没问题啊,完全按vue文档说明操作啦。
想一阵子,才找到思路:404是后端报出的,也就说Laravel给出的,laravel router 压根就没前端定义的路由。所以,当即一拍脑子,就想到是不是将laravel 异常处理在response出去前给中断一下,将404处理交给前端再处理一下,那么也只是需要在app/Exceptions/Handlerrender方法加下判断:


/**
* Render an exception into an HTTP response.
*
* @param \Illuminate\Http\Request $request
* @param \Exception $exception
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $exception)
{
// 解决vue history 地址丢失问题
if($exception instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException)
{
if ($exception->getStatusCode() == 404) {
return response()->view('welcome');
}
}
return parent::render($request, $exception);
}

解释一下:welcome 就是加载了vue CSS和JS,也就是vue依赖文件。
以上搞定前后端分离,vue history 404 问题!

原文地址:https://segmentfault.com/a/1190000016928656

Laravel+vue实现history模式URL可行方案的更多相关文章

  1. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  2. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  3. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  4. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  5. Vue项目History模式404问题解决

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...

  6. VUE路由history模式坑记--NGINX

    因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...

  7. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  8. Vue HTML5 History 模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  9. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

随机推荐

  1. sql中计算百分比

    sql中计算百分比:(转成字符串然后拼接%) ),) AS CHAR),'%') as aa from act_canal; 效果:

  2. 【算法】第二类斯特林数Stirling

    第二类Stirling数实际上是集合的一个拆分,表示将n个不同的元素拆分成m个集合的方案数,记为 或者 . 第二类Stirling数的推导和第一类Stirling数类似,可以从定义出发考虑第n+1个元 ...

  3. ikbc 时光机 F87 Ctrl 失灵 解决办法

    多按几次Fn+PrtSc,直至按键无错位.

  4. hiho 1590 - 紧张的会议室。区间问题

    题目链接 小Hi的公司最近员工增长迅速,同时大大小小的会议也越来越多:导致公司内的M间会议室非常紧张. 现在小Hi知道公司目前有N个会议,其中第i个会议的时间区间是(Si, Ei). 注意这里时间区间 ...

  5. POJ 2029 Get Many Persimmon Trees 【 二维树状数组 】

    题意:给出一个h*w的矩形,再给出n个坐标,在这n个坐标种树,再给出一个s*t大小的矩形,问在这个s*t的矩形里面最多能够得到多少棵树 二维的树状数组,求最多能够得到的树的时候,因为h,w都不超过50 ...

  6. SpringBoot学习笔记(3)----SpringBoot的profile多环境配置

    在实际的应用开发中,可能会需要不同配置文件来支撑程序的运行,如开发,测试,预生产,生产环境等,程序在不同的环境下可能需要不同的配置,如不同数据源等,如果每次在不同的环境下都要去修改配置文件就会闲得不合 ...

  7. 设置div内的内容不能被选中

    通过简单的css设置页面的文字无法被选定. <div class="select">我不能被选中复制</div> .select{ -webkit-user ...

  8. ztree连接数据库,实现下拉菜单

    $(document).ready(function(){ var treeObj = $("#treeDemo"); $.fn.zTree.init(treeObj, setti ...

  9. matplotlib bar函数重新封装

    参考: https://blog.csdn.net/jenyzhang/article/details/52047557 https://blog.csdn.net/liangzuojiayi/art ...

  10. Linux CentOs6.5误卸载自带python和yum后的解决办法

    事故背景:前几天因项目需要,在服务器上搭建python-mysql模块,结果没安装好,于是乎想卸载重装,遂在网上查询卸载python的方法,结果一不小心直接把系统的python删了个干净....... ...