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

项目: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/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

原文地址:https://www.cnblogs.com/lalalagq/p/9962100.html

时间: 2024-10-08 09:56:33

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

vue项目history模式下微信分享相关问题

import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() { let url = window.location.href shareApi.share({ url: url }).then(res => { if (res.code === 200) { wx.config({ debug: false, appId: res.data.appid,

Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口 vue中配置保持不变 nginx中配置如下: server { listen 8899; server_name localhost; location / { try_files $uri $uri/ /index.html; } } 第二种就是 # 打包配置 config-index.js 修改路径: assetsPublicPath: './'; # 前端路由配置 router.js: const rou

VUE的history模式下除了index外其他路由404报错

location / {index index.html;root /dist;try_files $uri $uri/ /index.html;}try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配.然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 原文地址:https://blog.51cto.com/14207669/2431296

如何去除vue项目中的 # --- History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:    这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申

vue的mode: 'history'模式

1 const router = new VueRouter({ 2 mode: 'history', 3 routes: [...] 4 }) 不用mode: 'history'的时候,页面url地址后面会加上一个"#"(官方文档说这样需要后台配置参考地址  https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD

vue路由的两种模式配置以及history模式下面后端如何配置

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

vue history模式下出现空白页情况

问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后,pc端微信开发者工具与Android手机 内测试分享都没问题,无论怎么跳转再分享也没问题.IOS 手机,首次到页面分享没问题,但是跳转后,就会报invalid signature 签名错误. 就是说 从 [http://aaa.com/index] 跳到 [http://aaa.com/detail

Vue H5 History 部署IIS上404问题

原文地址:https://blog.csdn.net/yinjing8435/article/details/71274416 https://blog.csdn.net/suxuelian/article/details/80103514 背景简介 vue使用vue-router时,默认的地址并不美观,以#进行分割,例如:http://www.xxx.com/#/main. 为了访问地址能像正常的url一样,例如:http://www.xxx.com/user/id. 按照官网介绍,使用 hi