vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置: nginx配置内容: location /{ try_files $uri $uri/@router; index index.html; } location @router { rewrite^.*$ /index.html...
对于VUE的router[mode: history]模式在开发的时候,一般都不出问题。是因为开发时用的服务器为node,dev环境中自然已配置好了。 但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下: 在nginx里配置了以下配置后, 可能首页没有问题,但链接其他会出现(404) 代码语言:javascript 复制 location/{rootD:\Te...
3.总结 上述配置完成后,打包Vue项目,重启Nginx再次刷新就不会在有404的现象了。(再次申明:以上只是针对本人所在的项目,不一定使用所有情况。)
因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404。 因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://...
当Vue.js项目的路由配置更改为history模式后,由于服务器不再基于URL路径返回对应的文件,而是由前端路由管理,这可能导致Nginx在访问非根路径时出现404错误。为了解决这个问题,你需要确保Nginx配置能够正确处理SPA(单页应用)的路由。以下是解决此问题的步骤: 确认Vue.js项目的路由配置已正确更改为history模式: 在Vue项目...
问题也解决,谢谢大家,Nginx配置时候少了/dist目录而已location /{ root dist; index index.html; try_files $uri $uri/ /dist/index.html; } 00 0 没找到需要的内容?换个关键词再搜索试试 向你推荐 部署在cdn上的单页应用如何使用前端路由的history模式 ...
1、之所以写这篇教程,是我们的项目使用到了history模式,报404后。由于我们的项目是放到了Tomcat中,所以选择了网上最简单的一种解决方式,直接在Tomcat中的web.xml中加入以下内容解决: <error-page><error-code>404</error-code><location>/</location></error-page> ...
在nginx上部署vue项目(history模式); vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/...
Vue项目History模式404问题解决 本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改。) 1.项目背景分析 本人是Java后台开发,Vue其实使用也没有多久,只能说简单了解。发现问题的时候其实也一头雾水,第一思想...
Vue项目History模式404问题解决 本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改。) 1.项目背景分析 本人是Java后台开发,Vue其实使用也没有多久,只能说简单了解。发现问题的时候其实也一头雾水,第一思想...