vue history路由模式404问题解决

已于 2024-04-08 12:16:21 修改
阅读量285 收藏
点赞数 3
文章标签： vue.js nginx javascript
于 2024-04-08 12:12:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49722066/article/details/137503345
版权

vue使用history路由模式打包到线上，F5刷新会重定向到404

直接修改ngxin配置即可

// product为工程名
location /product {
    root home/xxx/www;   //你自己的根目录地址
    try_files $uri $uri/ /product/;    //这里的 /product/ 也可以写成/product/index.html
}

如果使用宝塔部署，添加这行代码可以解决

try_files $uri $uri/ /index.html

$uri为变量，代表你访问的地址。

上面配置的意思大概是，如果访问xxx/文件夹下面的某个文件，找不到时就返回/xxx/下面的index.html文件

如白驹过隙
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue路由history模式刷新404问题解决方案
caihuawei123的博客
08-19 370
1.使用nginx的方法 server { listen 8168; server_name localhost; location / { root /opt/apache-tomcat-8.5.8/XXX/webapps/ROOT; index index.html; try_files $uri $uri/ @router; index
关于vue项目路由history模式下，nginx配置后404找不到问题解决方式
pjs9999的博客
11-23 1077
vue nginx配置记录线上配置坑，采用官方配置说明仍无效 记录线上配置坑，采用官方配置说明仍无效 在nginx配置为根路径’/’,设置官方推荐配置，仍不生效 官方推荐配置 location / { root /xxx路径/er-ui; try_files $uri $uri/ /index.html; } 采用以下配置解决问题 location / { root /xxx路径/er-ui; if (!-e $request_filename){ rewrit
Vue项目History模式404问题解决
大老杨的博客
10-30 9718
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。 1.1 查看项目打包后文件 首先看看项目打包后文件内容，看看有没有什...
nginx配置vue项目history的路由模式（非根目录）
qq_40816649的博客
10-29 6645
vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。 而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。 这里我选用的是nginx服务器。 vue项目中 vue.confi...
VUE工程打包后，history模式在IIS服务器上，非初始路由下，刷新报404错误解决方案（亲测有效）
2301_82243839的博客
05-08 630
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。2、下载web程序安装平台。
Vue中Router路由使用history模式发布后访问404
句无声的博客
01-28 6197
使用webpack打包发布，网页不能正常访问，先看下路由配置 export default new Router({ mode: 'history', base: '/putian/', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/ClusterManage', name: 'ClusterMana
解决vue打包Github pages部署访问路由地址404问题（路由history模式）
幻日のヨハネ
08-08 3245
问题 如果 vue 项目设置的是 history 路由模式，由于只有一个 index.html 主页面，所以每次访问非首页地址都会造成 404 。 比如我们访问 http://domain.com/path ，默认他就会去找 path 这个目录下的 index.html 文件，但是找不到这个文件，就会报 404 。 于是我们在 nginx 下采用路径重写回 index.html ： # vue redirect location / { try_files $uri $uri/
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 2497
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
vue项目上传到宝塔刷新404？（详细教程）
m0_64590669的博客
04-01 1315
vue项目上传到宝塔刷新404？（详细教程）
Vue路由history模式解决404问题的几种方法
12-10
但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...
Vue项目History模式404问题解决方法
12-01
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history...
vue2解决router使用history模式刷新报404问题
qq_40649432的博客
07-12 518
mode改成history后，页面首页访问正常，其他页面刷新报404错误 export default new Router({ mode : 'history', routes: [ { path: '/', name: 'index', component: index }, ] }) 解决：在网站根目录添加.htaccess文件 文件内容 <IfModule mod_rewrite.c> RewriteEngine On
vue设置路由模式为history，打包部署，并解决404问题
江湖人称小程的博客
09-20 934
vue设置路由模式为history，打包部署，并解决相关问题
vue/uniapp路由history模式下宝塔空间链接打开新窗口显示404解决方法
qq_22146195的博客
03-15 819
vue/uniapp路由history模式下宝塔空间链接打开新窗口显示404，或者域名后带路径参数刷新就报404。无论打开新窗口或刷新 都可以正常显示。
vue项目路由为 history 模式时， 线上环境刷新后空白页或404
qq_60990876的博客
09-22 3991
则是因为资源的基础路径出现了问题。需要修改vite.config.ts文件，将base改为 / 而不是 ./。如果有 .env.production 文件，是将该文件的VITE_BASE_URL更改 ，若改.env.development 文件或 .env 文件 则无效。nginx配置如下:重点在于 加上 try_files $uri $uri/ /index.html;本地没问题，部署到测试环境或线上后 刷新后空白页。前面莫名其妙加上了当前地址的第一级路由的地址。所以拿不到正确的资源。
vue的history模式，页面刷新404，以及引入得第三方插件或者JS路径错误的解决办法
WebDestiny的博客
09-02 7273
在解决问题之前先让我们了解下vue中的hash模式和history模式： vue中的hash模式： hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = lo...
深入理解 Vue.js 中的 deep: true
最新发布
weixin_42279822的博客
06-26 745
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue history路由模式支持 window.onmessage吗
07-20
是的，Vue中的history路由模式是支持window.onmessage的。 无论是使用hash模式还是history模式，Vue的路由都是基于浏览器的history API实现的。而window.onmessage是浏览器提供的API，用于在不同窗口（或者不同域）之间进行消息传递。 在Vue应用中，您可以在需要接收消息的组件中监听window.onmessage事件，并在事件处理函数中处理接收到的消息。无论是使用hash模式还是history模式，这种方式都是适用的。 需要注意的是，如果您的Vue应用使用了history模式，并且在部署时配置了正确的服务器设置，使得所有路由指向同一个HTML文件（如index.html），那么您需要确保在服务器端正确处理所有路由请求，以避免因服务器重定向而导致window.onmessage无法触发。 总之，Vue的history路由模式与window.onmessage可以一起使用，您可以根据实际需求在Vue组件中进行相应的处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值