Vue-router history模式下 + phpstudy 防止刷新404的解决办法

vue-router history项目配置到服务器后，打开非首页的页面刷新后出现404 NotFound

一、背景交代（纯唠嗑，急需解决问题的小伙伴请跳过）

Hi，你好。

我的Vue野生学习路线是从cdn接入然后跳到vue cli来构建项目的，截止到写这个博客的日期也就接触vue cli一个星期而已，出现这个问题是因为不想用vue-router默认的hash模式（比较丑，哈哈），就用上history模式。

在本地使用npm run serve的时候并不会出现这个问题，打包后部署到服务器就出现了404，虽然官方文档早有提及解决方法，但我没能找到如何配置Nginx （我太难了）

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

后来歇了一会，把玩了一下phpstudy就找到了~

二、版本相关

三、解决方法

1.非注册路由路径重定向到notfound页

在router/index.js中配置

{ path: '/:pathMatch(.*)',
    component: NotFound
}

注意：首先你得有一个notfound页面

2.在phpstudy中进行设置

打开设置->配置文件->vhosts.conf

找到挂载vue静态文件的网站并点击（前提：是已经新建网站并配置好静态文件路径），这时候就会弹出一个txt文件，红框内复制进官方推荐的代码即可

官方Nignx代码

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

四、总结

在网上找了很多资料也没找到…

我也是新手摸索出来的操作，如果哪里不对，请大佬指正，谢谢！