Laravel+vue实现history模式URL可行方案

YacaToy 发布于2019-07-25 14:30 / 1908人阅读

摘要：项目实现前后端分离。默认模式使用的来模拟一个完整的，于是当改变时，页面不会重新加载。没有特别的要求的话，模式亦正常访问。看看文档，要实现模式也很简单。切换一下模式，本地测试啦。配置一下没错，部署前端资源服务器上简单加上一条通用匹配规则。

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

hash URL 例如：http://yoursite.com/#/user/id。

history 模式时，URL就像正常的 url，例如 http://yoursite.com/user/id。

没有特别的要求的话，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/Handler中render方法加下判断：

/**
     * Render an exception into an HTTP response.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Exception  $exception
     * @return IlluminateHttpResponse
     */
    public function render($request, Exception $exception)
    {
        // 解决vue history 地址丢失问题
        if($exception instanceof SymfonyComponentHttpKernelExceptionNotFoundHttpException)
        {
            if ($exception->getStatusCode() == 404) {
                return response()->view("welcome");
            }
        }
        return parent::render($request, $exception);
    }

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

GPU云服务器云服务器 VUE实现webrtc Vue实现分页 url路由实现 vue+webrtc实现实时视频通话,语音通话

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40169.html

Laravel+vue实现history模式URL可行方案

摘要：项目实现前后端分离。默认模式使用的来模拟一个完整的，于是当改变时，页面不会重新加载。没有特别的要求的话，模式亦正常访问。看看文档，要实现模式也很简单。切换一下模式，本地测试啦。配置一下没错，部署前端资源服务器上简单加上一条通用匹配规则。项目：laravel + vue 实现前后端分离。vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 UR...

WilsonLiu95 2019-07-01 10:54 评论0 收藏0
[译]如何基于Laravel构建Vue应用（一）

摘要：使用能优雅的构建并且与单页面应用程序完美结合。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用作为层。例如，如果用户刷新路由，我们将需要匹配该路由并返回应用程序模板。运行应用程序该基础用于构建具有和路由器的。使用Laravel能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的La...

Rocko 2019-07-01 12:42 评论0 收藏0
vue vue-router(history模式) node(express)项目部署到云主机上的n

摘要：这个方法我没有尝试过，不过应该是可行的这样的优点是很简便，适合小型的网站项目将打包的项目和服务端分别部署客户端根目录主页避免模式刷新管理控制后台服务端跨域这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然我个人想了2种部署方案 1、将vue项目打包后放入node服务端的静态资源中访问整体结构基本是这样的 showImg(https://segmentf...

Honwhy 2019-07-25 14:24 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

姘搁『 2019-08-23 14:38 评论0 收藏0