解决前端vue项目在history模式下部署在nginx后刷新页面404的问题

最新推荐文章于 2024-03-11 12:09:47 发布
最新推荐文章于 2024-03-11 12:09:47 发布
阅读量473 收藏 10
点赞数 11
文章标签： 前端 vue.js nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjuxing/article/details/134681785
版权

下载nginx后找到在nginx目录下的conf文件夹下的nginx.conf文件，配置如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fff838da2c2d469fbc887baf93c3bb66.png
在这里插入图片描述
在nginx/html目录下部署时，如果是直接解压到该目录下不用配置demo，如果是直接将demo以文件夹的形式放入就必须以html目录为根路径写上路径，别忘记配置router:

mode: 'history', 
base: process.env.NODE_ENV === "production"?'/mooc365':"/"

打包部署一气呵成~

wjuxing
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index 3、后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目部署到服务器上路由模式为history时，刷新页面报404的问题
最新发布
tgy003的博客
03-11 604
如果前面两个都匹配不上的话，就会重写到index.html，因为这个index.html使我们项目的入口，index.html里面会读取当时打包好的js文件，就可以读取到路由配置，以实现我们浏览器的url对应的路由页面。root 你的项目路径 //如果前面没配的话,记得加上，前面配了，这一行可以省略。重启 nginx，然后随意刷新浏览器，再也不会出现404 问题了。因为前面配了root路径,所以下面就可以不加root。在nginx配置文件中添加以下配置项。
vue项目部署到nginx上history模式出现404
二饭的博客
07-06 340
我的解决方式如下，可以参考一下我的解决方案。 1、创建路由对象 // 路由对象 export default new VueRouter({ mode:'history', routes: router }); 2、配置vue.config.js 没有这个文件就创建一个，位置和babel.config.js同级 module.exports = { publicPath: '/', //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源 dev
Vue改用history模式后Nginx代理报404
古辛博格
12-18 389
由于以前VUE采用hash模式: hash—— 即地址栏 URL 中的#符号（此 hash 不是密码学里的散列运算） 比如：http://abc.example.com/abc/#/hello，hash 的值为#/hello 现采用history模式: history—— 利用了 HTML5 History Interface 中新增的pushState()和replaceState()方法。（需要特定浏览器支持） 比如：http://abc.example.com/a...
Nginx：vue路由使用history模式刷新404
z69183787的专栏
11-08 2914
在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部的 URL 的指向。当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。使用 Nginx try_files。例子：根据上面的配置，当请求。
Vue路由使用history模式，nginx下运行，页面刷新404
weixin_41285537的博客
04-28 1552
vue路由使用history模式，nginx下启动，页面刷新404
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 2312
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
vue项目history模式 解决nginx页面刷新404问题
weixin_44640245的博客
08-21 609
vue项目history模式 解决nginx页面刷新404问题
nginx 部署vue项目，路由模式为history时，页面刷新404问题
IT_dabai的博客
04-03 3035
因为打包部署后，地址栏的地址只是vue的路由，并不是真的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题
weixin_54931655的博客
07-07 3200
总之，要解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题，我们需要对Nginx进行配置，以便支持history模式。history模式是HTML5提供的一种前端路由模式，它使用HTML5的history API来实现前端路由，可以使得单页面应用在不刷新页面的情况下进行路由跳转。当用户刷新页面时，Nginx会将请求重定向到index.html文件，然后由前端路由来处理请求，使得用户可以正常访问页面。用户需要解决这个问题，使得单页面应用在使用history模式时，可以正常刷新页面。
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history...
Vue项目History模式404问题解决方法
12-01
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，...
vue项目history模式页面404之nginx部署解决方案
qq_36493719的博客
03-15 1106
问题 vue项目部署时，选择history模式，直接从首页进去，然后点击按钮，发现整个项目都没有问题，但是当刷新页面，或者直接输入非首页时，页面404无法找到。 分析 页面404说明访问页面不存在，vue项目，在history模式中，访问的是实际的地址，当访问如localhost时，nginx自动导向到index.html(nginx配置的)，当访问如localhost/test时，nginx会寻...
vue history模式，刷新页面404？结合nginx配置路由
LPLIFE的博客
12-26 2325
环境：vue2 怎么配置打包路径 打包上去之后是一个被压缩的文件，怎么解压放到指定的文件中 静态资源路径访问错误 vue history模式，刷新页面404？结合nginx配置路由 由于spa应用，在history模式下，路由的变更是前端的浏览器 history.pushState、replaceState进行监听切换的，我们只配置了首页的路由，当访问的时候，能够访问过去，也可以切到其他的路由，但是进到其他的路由进行刷新的时候，出现了404。 这是因为我们刷新了当前页面（访问页面相当与发起一
代码打包之后解决history模式刷新404和跨域问题
TZJ999919的博客
05-30 280
#### 修改配置文件。
vue router history模式 线上nginx部署 刷新页面导致404
码农老牛
05-29 814
在 Vue router 中使用 history 模式时，刷新页面可能会导致 404 错误。这是因为在 history 模式下，Vue 路由器通过修改浏览器的历史记录来实现路由切换，但是当用户直接访问某个 URL 时，服务器端没有相应的处理逻辑，于是就会返回 404。上述配置将尝试查找请求的 URI 文件，如果找不到，则尝试查找以该 URI 开头的文件夹，如果还找不到则返回 index.html，使应用程序可以正确加载并处理该路由。
vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决
06-16
在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种： 1. 配置后端服务器 如果你的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值