IIS上部署Vue网站 由于history模式导致刷新页面出现404报错的解决方式

最新推荐文章于 2024-04-15 14:38:45 发布
VIP文章 最新推荐文章于 2024-04-15 14:38:45 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsw0605/article/details/105560582
版权

在IIS上部署Vue网站，网页点击刷新按钮后出现如下图所示的错误；

原因主要是配置文件中Router配置了history模式

解决方式，为IIS安装Url重写工具，并进行相应的配置，安装方式以及配置操作如下；

1、下载Web平台安装程序，这里最后使用的是5.1的版本，下载可以到百度搜索一下，3.0的版本测试的时候无法打开

安装完成后在IIS可看到如下图标

最低0.47元/天 解锁文章
xsw0605
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli history模式实现tomcat部署报404的解决方式
10-16
主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue部署后刷新页面出现404
Star_Inori的博客
06-28 1447
Vue部署后刷新页面出现404
VUE工程打包后，history模式在IIS服务器上，非初始路由下，刷新报404错误解决方案（亲测有效）
happy81997的博客
11-29 1412
问题描述： vue默认模式是hash模式，URL地址会带有“#”。 例如：http：//www.xxx.com/#/index 为了去掉这个#，需要在vue-router中，设置model为history，开发模式下木有问题，打包后，问题来了， 原始路径下，http：//www.xxx.com/index刷新时候页面正常显示，如果路由跳转了，http：//www.xxx.com/inde...
iis history模式下刷新404问题
zcj的博客
02-10 311
iis history模式下刷新404问题
vue 部署到 iis 刷新报404
差池
09-28 2742
很纠结是否要写这篇分享，因为vue官网上已经有了解答，但是完全照搬它的内容还有问题，因此决定还是分享一下解决方法： 一：vue刷新报404 问题原因我就不说了，官网已经说了，想了解的看这里：vue刷新报404的原因 二：对于iis的解决方案如下 1：安装 IIS UrlRewrite 2：在你的网站根目录中创建一个 web.config(如果已经存在，就不用创建了) 文件，内容如下： <?xml version="1.0" encoding="UTF-8"?> <configuration
IIS部署前端项目刷新报错404
Ricale的博客
07-17 1007
react项目部署在windows服务器上时，使用IIS来部署，部署完成后打开响应ip+port没有报错，在相应页面点击刷新会出现这样的错误。解决办法：在项目根目录的web.config文件中使用下面一段代码即可(如果没有web.config可以手动创建一个)有的文章使用URL重写进行配置相关内容是一样的道理，使用URL重写配置之后也会自动生成相应的web.config。
Vue部署在IIS上后发布单页面刷新报错提示:404
Bibabu的博客
05-25 5337
写好的系统打包，运行指令:npm run build打包后会生成一个文件名为:dist文件夹,将该文件夹发布至IIS就可以进行访问了,但有的小伙伴会发现,单机每个页面都可以,但是却不能刷新页面，一刷新页面就会报错：404 not found这是因为,我们将文件打包后，与原来开发文件各个路径已经不同了,这是就要看看我们的路由是怎么配置的了,网上有很多方法解决方法一,配置nginx文件:serve...
.net6+IIS+vue 处理history路由模式下,刷新出404问题
z475299765的专栏
04-18 1020
IIS url重写 vue+iis+net6 部署. 解决刷新404问题
IIS部署vue项目页面刷新404,url重写问题解决办法
正一品程序员的博客
02-10 413
配置教程
IIS 部署 Vue 项目，F5刷新界面报 404
IT_laohu的博客
05-12 2675
在服务器上部署 Vue 项目，通过默认主页进入到其他页面时，如果直接刷新界面会报 404错误。 解决这个问题的话，需要在IIS 中设置 Url 重写规则。具体操作步骤如下： 1、双击打开Url 重写 2、点击右侧添加规则 3、选择 入栈规则中的空白规则 4、填写规则名称，这个自定义。模式内容填写 .* 5、点击 条件 栏右侧箭头，会出现逻辑分组选择框。点击添加 6、添加条件，条件输入：{REQUEST_FILENAME}。添加两个条件。 7、编...
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...
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
在vue和 js 、ts 数据中使用 vue-i18n，切换语言环境时，标签文本实时变化
OnismYY的博客
04-12 708
我的项目需要显示两种语言(中文和英文)，并且我想要切换语言时，页面语言环境会随之改变，但是目前发现，只能在vue中使用$t('')的方式使用，但是这种方式只能在vue中使用，但是我的菜单文件是定义在js中，在vue中遍历显示的，所以我开始尝试用标签代替我原本的字符串
vue大屏
最新发布
qq_44428688的博客
04-15 200
使用viewport方案和postcss-px-to-viewport插件来实现屏幕适配，主要是为了让你的Vue大屏应用在不同尺寸和分辨率的屏幕上都能良好地显示。最大的父盒子用相对的定位 子盒子全部用绝对定位 一层层往下写盖下去。我本人更习惯 子绝父相。3.然后具体布局内容。
vue3 手写tab栏的滑动效果
Michelle209的博客
04-12 185
在tab上定位一个slider，每次点击的时候获取当前active的tab-item序号，从而获取到其相对于父元素的水平距离，然后把这个距离更新到slider的left属性上。
vue数据检测原理
weixin_45291798的博客
04-11 1003
前言Vue中的数据监听离不开Object.defineProperty()方法的使用，在了解数据监测原理之前，建议先掌握defineProperty的用法。目标1 数据监测问题2 数据监测原理3 如何实现数组更新。
【vue】v-bind动态属性绑定
m0_63070489的博客
04-11 376
【vue】v-bind动态属性绑定
Vue.js高效前端开发(页面验证跳转，查)
Mr_wangzu的博客
04-09 275
【代码】Vue.js高效前端开发(页面验证跳转，查)
java解决vue的history模式下刷新页面进入404
09-09
在使用Vue的history模式时，当页面进行刷新时，会出现404错误。这是因为Vue的history模式使用的是HTML5的history API，而不是传统的hash路由模式。在使用history模式时，服务器需要配置相应的规则来处理路由请求。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值