nginx + Vue-router history 模式 报404错误的解决方案

问题描述

由于vue-router默认的hash模式，地址栏url看起来是这样的

127.0.0.1/#/home

如果我们不想要url中出现#，即

127.0.0.1/home

则我们需要在创建router时指定mode参数

export default new Router({
    mode: 'history',
    routes: []
})

在开发环境下，这并不会引发什么问题。
但是当项目上线，假如你们使用nginx来代理前端资源时
当你直接由地址栏访问除了/以外的地址或刷新页面时，预期应当出现的页面变成了nginx 404页面
这是由于nginx无法找到对应名字的静态资源

解决办法

在nginx.conf配置文件静态资源对应的location配置项下加入
try_files $uri $uri/ /index.html;
look

location / {
　　root   /home/xxx/frontend/dist;
　　index  index.html index.htm;
　　try_files $uri $uri/ /index.html;
}