原因

在history模式下，页面的跳转都是通过vue-router进行加载

在页面刷新时或者通过普通链接进行跳转时,会向服务器发送请求，这时请求并没有经过router

但服务器是根据页面路由，去按路径寻找资源的,我们打包好的web站点只有一个html页面，不存在其他资源目录下的html，服务器找不到对应页面所以就会返回404

解决方法

使用nginx配置

将所有的请求都转发到index.html

修改nginx.conf中的配置信息：

location / {
    root html;
    # index index.html index.htm;
    try_files $uri /index.html;
}

使用HashRouter

HashRouter会在地址栏上面添加哈希值作为路由跳转，服务器不会处理哈希值，所以请求会被router接管

拓展：nginx常用变量

常见的变量：

$uri 当前请求的 URI，但不含“？”后的参数
$args 当前请求的参数，即“？”后的宇符串
$arg_xxx 当前请求里的某个参数，“arg ”后是参数的名字
$http_xxx 当前请求里的 xxx 头部对应的值
$sent_http_xxx 返回给客户端的响应头部对应的值
$remote_addr 客户端IP 地址。
$http_cookie 获取cookie值
$cookie_xxx 当前请求的cookie xxx对应的值
$request_uri 浏览器发起的不作任何修改的请求的url中的path 如在`www.baidu.com/p1/file?d=111`, 其值为/p1/file?d=111
$uri 指当前的请求URI，不包括任何参数，反映任何内部重定向或index模块所做的修改
$request_method 请求方法