宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的，因为我做一切开发都想要希望要从一个标准的构建去编码

所以，我的项目在node下运行，开发，调试是没有一点问题的，npm run build也是完全OK的，vue路由是history模式

把build出来的dist文件夹部署到生产环境，使用nginx的时候，问题就来了

我的问题描述：

如果从首页打开，点击任何页面都能够正常访问，而当你处在某个页面（非首页）的时候，刷新就出现了404错误。这就很尴尬了。

通过不断调试思考，最终我查到了两个解决方法，以供需要的兄弟参考，适合使用宝塔管理的兄弟

以下两种解决方法的前提是，要把dist里面的文件全部拷贝到nginx服务器的根目录下，否则配置起来会麻烦很多，就是每个路由节点都要添加下面的解决代码。

比如你dist文件放在这个网站目录下/aaa/bbb/dist，

这时候，就要在server /aaa {}配置一遍，server /aaa/bbb {}配置一遍

如果非要在根目录的多级目录下配置站点，可以参考这个博客：https://www.cnblogs.com/haonanZhang/p/9791983.html

第一个解决方法：如下图，直接在nginx配置文件里加上404处理

这样就解决了报404的时候，原理是nginx在catch到404错误后路由才重新解析url，但是它有个可以忽略的小问题就是，404的错误在浏览器调试界面的网络请求列表里还能看到

第二个解决方法：如下图  配置一个url重写

它可以解决第一种方式中出现的小问题，原理是nginx在catch到404错误前就重写了url