vue中history模式egg后台宝塔上线后刷新nginx报错404

我们都知道vue中路由有两种模式:hash模式和history模式，我也尝试了history模式，但是项目上线项目上线之后每每刷新nginx就会报错404，最后我在网上找了尝试了一圈都没有解决问题。最后含泪换回hash模式，但是看着长长一串的url，还有个扎眼的#号，十分的难看，但在hash模式下刷新不会404。最后我也是在一位前辈的帮助下找到了解决的方法，感谢前辈 @易路先登 。

hash模式下的url在后台请求之后#之前的内容还是存在与此次请求中的，因此每一次请求都会返回index.html页面，这样路由就交给了前端处理。那么同样也是路由的history模式却没有hash的功能，没有#号（例如你的页面为www.newurl.com/home,使用history的话在你的egg后台的router中并没有这个接口，所以刷新之后直接返回了404），更没有在请求中有一些方式能把路由交给前端处理，所以，我们在后台配置中吧路由配置成交由前段去处理，下面我给出了两种处理方法。

1、使用hash模式

切换hash模式十分简单，只需要在vue的路由配置文件中 63行mode这里改为‘hash’即可

2、使用history模式nginx配置

切换history模式同样跟上面切换hash的一个地方，把hash改为history即可，但这只是完成了第一步。

 我使用的是宝塔面板，使用宝塔。第二步 egg的静态资源直接放在app下的public文件夹中（直接打包好吧dist拖进去即可）

 同时配置两个地方第一个是config文件下的config.default.js文件夹下，吧你放静态页的地方指向过去，如果你做的方法没错直接复制即可，如果未知不同的话就引入你放静态页的位置

config.static = {
        prefix: '/',
        dir: [ 
	        path.join(__dirname, '../app/public/dist'), //上传文件等的目录
	        path.join(__dirname, '../dist') //放置前端打包后的文件
    ]}

第二个配置在router中redirect重定向到index.html，定位到前端首页

 第三部，配置nginx，使用宝塔的话nginx的配置十分方便，在试过一圈之后，我发现vue官网给出的方法十分的正确

location / {
  try_files $uri $uri/ /index.html;
}

放在这个域名的默认配置文件下

重启nginx（一定要重启，不重启没效果，在配置nginx的时候最好没配置一项就重启一次），一般刚注册宝塔就会让你下载nginx，把他放在宝塔首页里，一键重启。 

之后就搞定了，如果大家使用数据库的话，使用nginx反向代理egg的http://localhost:7001,再次重启ngxin，pm2重启（pm2是个管理工具，它能够管理egg项目的启动，但是使用pm2的话需要在egg中写相应的启动文件，大家可以自行百度），然后就搞定了。

再访问页面，怎么刷新也不会出现问题了，url上也没有了难看的#号，清爽了不少