history模式下页面刷新404问题

  最近在完成实验室oj项目部署时，发现了一个有趣的现象：

可以正常进入项目，导航栏上各个组件间也可以正常跳转，但点击页面刷新按钮后，就离奇的出现了404。

1、问题分析

  由于实验室原先有主体项目，所以oj项目挂载时，api接口和路由都要求挂载/oj前缀。

2、问题解决

  经过发现，原主体项目没有配置路由模式，默认是hash模式，而oj项目定义了mode: 'history'。所以，改为hash模式即可。

3、资料查询

  经过上面的事件，我想那一定要使用history模式呢?

原理：

① 导航栏的跳转

导航栏间的跳转是不会向服务端发送请求的。

• hash 模式：会匹配路由规则，进而进行组件切换
• history 模式：会利用 h5 的 history API 进行导航切换

② 回车刷新

前端打包后的 dist 包中，只有 index.html。所以，history 模式下发送的请求地址，服务端是找不到的。

• hash 模式：只将 hash 前面的部分当作地址
• history 模式：会将地址栏中的地址全部看作请求地址

方案

① 开发环境（前端）

官方方案：https://webpack.docschina.org/configuration/dev-server/

• vue.config.js

module.exports = {
  publicPath: '/',
  devServer: {
    // 解决history模式下，服务器请求不到资源返回404问题
    // historyApiFallback: true
    historyApiFallback: {
      // index: '/oj/index.html' // 加不加.与publicPath一致
      rewrites: [
        {
          from: /.*/g,
          to: '/oj/index.html'
        }
      ]
    },
    proxy: {}
  }
}

② 部署环境（后端）

官方方案：https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx

• /usr/local/nginx/conf/nginx.conf

    # 代理/oj，而不是/是因为前端使用了base: '/oj',
    location /oj {
      root  /www/wwwroot/oj;
      index  index.html index.htm;

      # 配置url🎈重写语句（先返回404，然后返回index.html）
      try_files $uri $uri/ /oj/index.html;
    }