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

最新推荐文章于 2024-07-13 17:43:34 发布
最新推荐文章于 2024-07-13 17:43:34 发布
阅读量526 收藏 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
    评论
Nginx 服务部署 Vue 项目后刷新页面,出现 404 问题
weixin_43079157的博客
11-13 2103
一、环境 1.vue-cli 3.x 2.Nginx 二、综述 项目之前vue-router使用默认‘hash’模式，在本地与部署线上环境后都没有问题，因为要去掉URL中的 ‘#’ 号，故使用‘history’路由模式，故再次部署线上环境后，首页能正常访问，菜单内点击切换也没有问题，但当你刷新页面后，则出现 404 Not Found，故在此记录一下解决办法 三、解决思路 刷新页面时访问的资源在...
部署问题-Vue Router在history模式下刷新页面404问题
yaoson的博客
09-21 3510
（2）History：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。在正式服务器中，将本文中的相应解决问题的代码配置到Nginx下配置SSL证书的443端口的serve下面；（1）SSL证书：（标记有“需要修改”字样的地方，是需要替换成你自己的配置）（标记有“需要修改”字样的地方，是需要替换成你自己的配置）请根据当前环境配置；
Vue路由使用history模式，nginx下运行，页面刷新404
weixin_41285537的博客
04-28 1686
vue路由使用history模式，nginx下启动，页面刷新404
vue项目history模式 解决nginx页面刷新404问题
weixin_44640245的博客
08-21 821
vue项目history模式 解决nginx页面刷新404问题
nginx部署的vue前端项目出现Request failed with status code 404
最新发布
Ki_Kis的博客
07-13 284
运行前端项目能后正常显示页面内容，但无法正常发送请求和响应请求。如图:点击部门管理不能显示部门信息，正常应该要显示部门信息的。
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 2599
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
nginx 部署vue项目，路由模式为history时，页面刷新404问题
IT_dabai的博客
04-03 3334
因为打包部署后，地址栏的地址只是vue的路由，并不是真的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题
weixin_54931655的博客
07-07 3421
总之，要解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题，我们需要对Nginx进行配置，以便支持history模式。history模式是HTML5提供的一种前端路由模式，它使用HTML5的history API来实现前端路由，可以使得单页面应用在不刷新页面的情况下进行路由跳转。当用户刷新页面时，Nginx会将请求重定向到index.html文件，然后由前端路由来处理请求，使得用户可以正常访问页面。用户需要解决这个问题，使得单页面应用在使用history模式时，可以正常刷新页面。
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vue下路由History模式打包后页面空白的解决方法
08-27
Vue下路由History模式打包后页面空白的解决方法 在 Vue 项目中，默认的路由模式是 Hash 模式，但是这种模式会带来一些问题，如 URL 中的 "#" 符号不美观，微信分享、授权登录等功能也会出现一些问题。 History 模式...
vue项目部署到服务器上路由模式为history时，刷新页面报404的问题
tgy003的博客
03-11 787
如果前面两个都匹配不上的话，就会重写到index.html，因为这个index.html使我们项目的入口，index.html里面会读取当时打包好的js文件，就可以读取到路由配置，以实现我们浏览器的url对应的路由页面。root 你的项目路径 //如果前面没配的话,记得加上，前面配了，这一行可以省略。重启 nginx，然后随意刷新浏览器，再也不会出现404 问题了。因为前面配了root路径,所以下面就可以不加root。在nginx配置文件中添加以下配置项。
代码打包之后解决history模式刷新404和跨域问题
TZJ999919的博客
05-30 310
#### 修改配置文件。
vue router history模式 线上nginx部署 刷新页面导致404
码农老牛
05-29 880
在 Vue router 中使用 history 模式时，刷新页面可能会导致 404 错误。这是因为在 history 模式下，Vue 路由器通过修改浏览器的历史记录来实现路由切换，但是当用户直接访问某个 URL 时，服务器端没有相应的处理逻辑，于是就会返回 404。上述配置将尝试查找请求的 URI 文件，如果找不到，则尝试查找以该 URI 开头的文件夹，如果还找不到则返回 index.html，使应用程序可以正确加载并处理该路由。
react及vue前端项目使用history路由 部署nginx 404踩坑问题
cdy_1的博客
07-08 820
这么一看是不是觉得没啥问题了，但是但是问题来了，结果虽然是跳转我项目的index.html了，但还是没匹配到我的路由，比如我跳转home页，他给我跳转我项目自己的404页了，出现了下面这个玩意儿。但是由于我的比较特殊，我是部署多个项目的也就是说文件结构是下面这种，像刚才那种配置的话就会跳转到根目录的index.html了，显然不是我想要的。我的配置就是这样，然后就好了，所有针对部署多个项目的情况应该这么配置，注意这个名字要和nginx里的那个文件夹名字一样。一种是哈希路由，其原理就是通过哈希值跳转。
Vue2：路由history模式的项目部署后页面刷新404问题处理
Brave_heart4pzj的博客
03-01 867
Vue
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 4400
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
nginx配置服务器中vue项目刷新404问题
知识共享
08-08 161
打包好的vue项目在wwj中，所以需要http://www.wewewew.cn/wwj/ 访问wwj下得index.htm。vue项目中得vue-router使用得是history。服务器静态页面文件放在/www/blogs/wwj/指定文件夹/www/blogs。
vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决
06-16
在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种： 1. 配置后端服务器 如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上，你可以配置服务器来处理这个问题。具体做法是，在服务器上配置一个重定向规则，将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例，可以在 Apache 的配置文件（如 httpd.conf）中添加以下规则： ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这个配置将所有的 URL 请求都重定向到 index.html 文件上，这样即使刷新页面，服务器也会返回正确的内容。 2. 使用 hash 模式 如果你不想在服务器上配置重定向规则，你可以考虑使用 hash 模式。在 hash 模式下，Vue 会使用 URL 中的 # 符号来表示路由，这样即使刷新页面，浏览器也只会重新加载 index.html 文件，而不会向服务器发送请求。要启用 hash 模式，只需要在 Vue 路由的配置中添加以下代码： ``` const router = new VueRouter({ mode: 'hash', routes: [...] }) ``` 这样就可以启用 hash 模式了。需要注意的是，hash 模式下，URL 中的 # 符号后面的内容不会被发送到服务器，因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值，并根据这个值来渲染不同的页面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值