Vue路由history模式刷新404的解决方法

前言

在history模式下，开发环境中各页面的访问都正常。但是在生产环境只能访问首页（刷新404），其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。

后端配置：

1.Nginx

location / {
  try_files $uri $uri/ /index.html;
  #检测文件存在性,重定向到首页目录,防止404。
}
1
2
3
4

2.Koa

使用中间件

//解决vue-router的history模式下，页面刷新后not found的问题
const history = require('./middleware/koa2-connect-history-api-fallback');
app.use(history({
    verbose: true //打出转发日志
}));
1
2
3
4
5

3.Express

//引入中间件
const history = require('connect-history-api-fallback');
//使用中间件
app.use(history());
1
2
3
4

4.Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
1
2
3
4
5
6
7
8