项目: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. .Net垃圾回收和大对象处理

    本文引自:http://www.cnblogs.com/yukaizhao/archive/2011/11/21/dot_net_gc_large_object_heap.html CLR垃圾回收器根 ...

  2. JavaScript学习——DOM对象

    1.DOM操作 Document:整个html文件都称之为一个document文档 Element:所有的标签都是Element元素 Attribute:标签里面的属性 Text:标签中间夹着的内容为 ...

  3. hiho151周*

    题目链接 题目大意:依次在给定的三维坐标上垒方块,对于一个新的坐标需满足两个条件 1:六个方向有相邻的方块或者z==1[题目说明了初始状态是:所有z==0的位置都有方块] 2:该位置存在一条到无穷远处 ...

  4. vue实现tab栏切换

    html <ul class="tab"> <li v-for="(item,index) in tabs" @click="tab ...

  5. [agc016d]xor replace

    题意: 题解: 棒棒的神仙题...这题只是D题???(myh:看题五分钟,讨论两小时) 首先这个异或和是假的,比如我现在有$a=(a_1,a_2,a_3,a_4)$,操作一下$a_2$,就变成了$a= ...

  6. web移动端-弹性盒模型

    (父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...

  7. java jar打包命令使用

    用法:jar {ctxu}[vfm0Mi] [jar-文件] [manifest-文件] [-C 目录] 文件名 ... 选项: -c 创建新的存档 -t 列出存档内容的列表 -x 展开存档中的命名的 ...

  8. 很好的DP思路,字符串比较次数

    题目: https://leetcode.com/problems/distinct-subsequences/?tab=Description 一般没有明显思路的情况下,都要想想DP,用下Divid ...

  9. hadoop-04-mysql安装

    hadoop-04-mysql安装 su root 1,rpm -qa|grep mysql 2, rpm -e --nodeps `rpm -qa|grep mysql` 3,rpm -ivh co ...

  10. C++ 何时使用动态分配(即使用newkeyword)?何时使用指针?

    动态分配 在你的问题里.你用了两种方式创建对象.这两种方式基本的不同在于对象的存储时间. 当运行Object myObject;这句代码时.它作为自己主动变量被创建,这意味着当对象出了作用域时也会自己 ...