Vue项目使用history模式后刷新页面后网站就没了？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

前情提要

       其实对于history路由模式下刷新页面或者访问不存在的路由的时候浏览器就会出现404崩溃页面。而且大多数第一时间想到的就是让后端人员在nginx上配置一下，设置成当找不到资源的时候自动返回指定的文件。但是除此之外呢？

先来看下最常用的解决方案：nginx配置

咱们先来看一下nginx如何配置才能解决这个问题

• 在了解nginx如何配置之前我们需要知道几个基本字符代表的意思
  1. location模块
     • 会对请求路径进行匹配，然后执行相对应的命令。
     • 匹配优先级：
       • = ：表示精确匹配，匹配上就进入该模块。最高优先级。
       • ^~ ： 表示优先匹配，如果按照从上往下的顺序匹配到该模块后匹配成功就进入该模块。第二优先级
       • ~ : 表示区分大小写的正则匹配。也是按照从上而下的匹配顺序，匹配到就进入模块并停止匹配。第三优先级。
       • ~* ： 表示不区分大小写，其他的同上面一样。第三优先级
       • / ： 又叫通配符，表示不管是什么请求都会进入这个模块。这是最低的优先级。
     • 注：正常的表示是：location =/xxx { 具体模块命令 };表示匹配到 /xxx 则进入模块。也就是说上面说到的匹配方式后面都会跟上具体的要匹配的path。只有通配符/不需要，因为任何请求在没有其他匹配规则的情况下都会进入该模块。
  2. try_files : 表示当nginx在本地找不到指定的资源文件的时候就会返回try_files标记的文件地址
  3. $uri : 该变量指的是当前的请求路径，不包含任何参数。该路径是指去掉协议，域名或者ip，端口号以及？之后的参数后的地址。
• 具体配置：

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

• 没错，就上面这一条信息就可以了。

不使用nginx，只使用node的话该如何解决这种问题呢？

当然是使用现成的插件了：connect-history-api-fallback

• 使用方法：(适用于Express框架)
  • npm i connect-history-api-fallback -S

  • ...
    const app = require('express');
    const histroy = require('connect-history-api-fallback')；
    app.use(histroy)
    ...
    

  • 如果你的项目部署都是常规的部署，没有更改index.html文件的名字，那弄到这里基本上就可以了。不用做其他的任何配置。
• 使用方法：(适用于koa2框架)
  • npm i koa2-connect-history-api-fallback -S

  • const Koa = require('koa'); // 或者 const Koa = require('koa2')
    
    // require 'koa2-connect-history-api-fallback' middleware
    const { historyApiFallback } = require('koa2-connect-history-api-fallback');
    
    // create app
    const app = new Koa();
    
    // use historyApiFallback
    app.use(historyApiFallback());
    
    // other middlewares
    app.use(...);
    

  • 如果你的项目部署都是常规的部署，没有更改index.html文件的名字，那弄到这里基本上就可以了。不用做其他的任何配置。

出现这个问题的原因

• 相必jym对于hash的路由模块非常之熟悉了，采用#+hash值的方式，无论你是刷新页面，还是手动输入地址，都不会让浏览器发起请求。只会在当前的域名根目录下获取的html文件进行请求操作。即使你输入的地址是无效地址。
• 但是history模式，在不刷新页面，地址都是存在的地址时浏览器不会主动发起请求。但是当你输入的地址在项目的路由配置中是没有的时候，或者刷新页面的时候，浏览器就会认为你在向其他新的网站发起请求，那么这个时候就会出现如果不配置的情况下的404情况。

总结

那么留个思考问题，connect-histroy-api-fallback是如何实现的呢？