history模式的单页面应用刷新后页面404的解决办法

一、问题描述

采用history模式的vue的单页面应用，刷新时404。

问题分析：
vue-router设置的路径不是真实存在的路径，故页面刷新后访问的资源在服务端找不到

二、解决办法

1、本地调试时，解决404的办法

webpack配置文件修改：

module.exports = {
  //...
  devServer: {
    historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html
  }
};

在devServer里面有个historyApiFallback的属性，用于找不到页面时返回默认主目录的index.html。

如需找不到页面时跳转到指定页面，需做如下配置：

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
		rewrites: [{ // 将from匹配的路由，跳转到pages目录下的index.html页面
			from: /.*/g,
			to: '/pages/index.html'
		}]
	},
  }
};

2、生产环境下，解决404的办法

修改nginx文件：

// ...
location / {
	root /opt/nginx/html/;
	try_files $uri $uri/ /index.html; // 按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理;
}