Vue用nginx开启服务history模式刷新网页不404配置

最新推荐文章于 2025-03-08 01:36:02 发布
原创 最新推荐文章于 2025-03-08 01:36:02 发布 · 171 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #nginx #前端

在nginx配置文件中，通过`location`块设置路由，确保在Vue应用使用history模式时，刷新页面不会出现404错误。关键配置是`try_files$uri$uri//index.html;`，这将重定向所有未找到的路径到根目录的index.html，从而避免路由失效。 
location / {
            root   html/dist;
            index  index.html index.htm;
            
            #vue的history刷新不404
	        try_files $uri $uri/ /index.html;
           }

在conf文件的nginx.conf里加上注释下面的那句话

lUaena
关注
Vue路由history模式采坑：Nginx配置Vue项目刷新页面404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
05-31 1533
最近部署Vue项目时，刷新页面报404问题
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 7020
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 3266
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
在nginx上部署vue2/vue3项目(history模式)
qq_41231694的博客
03-27 7085
1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样) vue2配置 const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式 base: '/bank/page', // 基础路径 routes: [ { path: '/count', name: 'count', component: resolve => require(
vue history模式，刷新页面404？结合nginx配置路由
LPLIFE的博客
12-26 2611
环境：vue2 怎么配置打包路径 打包上去之后是一个被压缩的文件，怎么解压放到指定的文件中 静态资源路径访问错误 vue history模式，刷新页面404？结合nginx配置路由 由于spa应用，在history模式下，路由的变更是前端的浏览器 history.pushState、replaceState进行监听切换的，我们只配置了首页的路由，当访问的时候，能够访问过去，也可以切到其他的路由，但是进到其他的路由进行刷新的时候，出现了404。 这是因为我们刷新了当前页面（访问页面相当与发起一
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history...
详细解析Vue在history路由模式部署后刷新404问题
最新发布
weixin_44646763的博客
03-08 892
详细解析`vue`项目使用了`history`路由模式，且在本地时运行正常，但打包通过nginx部署后，刷新页面，出现了404错误
在nginx上部署vue项目(history模式)的方法
11-30
在Vue.js应用中，`vue-router` 是一个常用的路由管理库，它提供了两种导航解析模式：`hash` 和 `history`。默认情况下，Vue应用使用`hash`模式，URL会显示为`http://localhost:8080/bank/page/count/#/`的形式，其中...
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
vue项目通过nginx部署，刷新产生404问题的解决
m0_37630138的博客
10-08 5350
vue项目通过nginx部署，刷新产生404问题的解决
nginx解决vue路由history模式刷新404问题
J_Lee
06-28 4851
在nginx上部署vue项目(history模式)； vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址： 使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下： http://localhost
vue路由history模式刷新404问题解决方案
qq_40663497的博客
10-28 2618
vue单页因微信分享和自动登录需要，对于URL中存在’#’的地址，处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式，就会有个新的问题，就是页面刷新后，页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 我这里是针对nginx的配置，总结如下： 方案一 （这种方式容易被第三方劫持） location /{ root /data/nginx/html; ind
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
热门推荐
qq_52700250的博客
06-22 1万+
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
Nginx：vue路由使用history模式刷新404
rewiner的专栏
06-28 1007
location /{ root E:\\dist; #解决404 try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; }
VUE+Nginx history路由模式下，解决页面刷新404
趁年轻，多学点
12-30 2065
vue+nginx history模式打包后，刷新404问题
vue项目上线nginx刷新404-history模式
weixin_44012561的博客
11-17 128
vue是单页面模式 vue前端项目上线后，链接正常，首页正常，但是刷新报404错误 需要更改nginx的conf配置 location /{ root /data/nginx/html; index index.html index.htm; #主要是下面这一行 if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break
vue2路由history模式下部署到服务端刷新404 bug解决
qq_43198727的博客
07-22 973
vue2路由history模式下部署到服务端刷新404 bug解决
Nginx服务器下VUE history模式子路由刷新404的问题
denga00的博客
04-05 504
Nginx服务器下VUE history模式子路由刷新404的问题环境、情况解决办法 环境、情况 我是使用宝塔面板生成的服务器，默认的Nginx。 由于遇到了这个在子路由刷新就404的问题，故此我就开始了漫长的百度中。网上的答案比较多，其实大部分都是对的，但是都没讲清楚是在哪修改Nginx配置文件，我一直以为是全局的Nginx配置文件，但其实并不是，是单个网页的Nginx配置文件。 废了我好多时间，可能这就是小白的痛吧！ 写下这篇文章帮助后来的小白跳坑。 解决办法 如图， 1、宝塔面板点击网站 2、点击你
vue history 模式nginx配置及配置后刷新 404 的解决办法!
Sean-X的博客
08-17 7488
vue history模式下nginx配置 在usr/local/nginx/conf/vhost 下 域名.conf配置文件修改或添加 server { ##在server下添加或在location里面添加以下代码 location / { if (!-e $request_filename) { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值