我的项目是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