宝塔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

发布了65 篇原创文章 · 获赞 11 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/u011280778/article/details/100613427