IIS部署vue项目页面刷新404解决办法

最新推荐文章于 2025-09-18 16:53:05 发布
原创 最新推荐文章于 2025-09-18 16:53:05 发布 · 7.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决使用vue-cli创建并由webpack打包的项目，在IIS上部署时遇到的404错误问题。通过安装URL重写工具及配置入站规则，实现正确解析单页应用路由。
部署运行你感兴趣的模型镜像

文章目录

前言

当我使用vue-cli的方式创建的项目的时候使用webpack进行打包，只有一个index.html入口文件，尝试部署到iis上访问时刷新浏览器会出现404的情况。
下面我来简单的介绍下如何进行解决！

1、安装URL重写工具

安装URL重写工具需要使用Web平台安装程序；下载地址：https://www.microsoft.com/web/downloads/platform.aspx。

在这里插入图片描述

2、编写入站规则

按照如图的方式进行编写入栈规则即可。
在这里插入图片描述

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

IIS部署VUE刷新404问题如何解决？
猿小白的博客
03-31 1480
新建Web.Config文件，写入以下内容，将文件放入到dist根目录中的。 <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing=..
Vue项目发布到iis后刷新页面404报错最简单的解决办法
qq_43370509的博客
11-28 1244
Vue项目发布到iis后刷新页面404报错最简单的解决办法 在项目根目录添加一个web.config文件，代码如下： <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=
Vue部署后刷新页面出现404
Star_Inori的博客
06-28 1699
Vue部署后刷新页面出现404
IIS 部署 Vue 项目，F5刷新界面报 404
IT_laohu的博客
05-12 3181
在服务器上部署 Vue 项目，通过默认主页进入到其他页面时，如果直接刷新界面会报 404错误。 解决这个问题的话，需要在IIS 中设置 Url 重写规则。具体操作步骤如下： 1、双击打开Url 重写 2、点击右侧添加规则 3、选择 入栈规则中的空白规则 4、填写规则名称，这个自定义。模式内容填写 .* 5、点击 条件 栏右侧箭头，会出现逻辑分组选择框。点击添加 6、添加条件，条件输入：{REQUEST_FILENAME}。添加两个条件。 7、编...
解决 Vue SPA 刷新导致 404 的问题
最新发布
weixin_45809780的博客
09-18 389
这是一个非常常见的问题，当使用 Vue.js 等前端框架构建单页面应用（SPA）并在浏览器中刷新时，由于前端路由路径被直接发送到后端服务器，而服务器没有对应的路由处理，导致返回 404 错误。通过vue展示页面，在地址栏中会出现前端的地址导航栏，而用户点击浏览器中的刷新按钮时，浏览器会将地址栏中前端的导航路径发送get请求到后台，导致404。最常用的解决方案是在后端服务器配置中，将所有非 API 和非静态资源的请求都重定向到 Vue 应用的入口文件（通常是。
iis部署vue项目，刷新404问题
ANNENBERG的博客
06-27 820
1.进行URL重写 2.如果没有URL重写，需要去下载安装 下载所需模块，下载地址：urlrewrite 3.安装后，双击打开，右击添加规则，或者点击右侧“添加规则” 4.填写名称 完成后.点击右侧 应用--返回规则，再次浏览可以刷新了 ...
IIS部署vue项目刷新404问题
fankse的博客
07-13 905
注意： 新建文件后得重启下iis配置得web站点。在dist目录下新建web.config文件。
vue3前端部署之后刷新页面报404
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
02-06 816
在完成项目开发后将前端项目部署到iis之后刷新界面出现了404错误，这个错误原因是使用了hash模式路由，要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。
精选资源
IIS部署.NET+Vue项目.docx
05-25
iis 部署 .net + vue 项目知识点总结 在本文中，我们将对 iis 部署 .net + vue 项目的知识点进行总结，涵盖从项目的基本环境到 api 的配置、https 的设置、Swagger 的使用等多个方面。 一、基本环境 首先，我们...
vue框架下部署上线后刷新报404问题的解决方案(推荐)
10-17
Vue框架在部署上线后，用户在刷新页面时可能会遇到404错误，这通常是由于Vue应用采用单页应用（SPA）模式，路由处理方式与传统Web应用不同导致的。为了解决这个问题，我们需要对服务器配置进行调整，确保即使URL路径...
SpringBoot+Vue整合部署教程及刷新页面404问题
Sky的博客
11-30 2316
最近笔者在部署一个SpringBoot（Maven）+Vue项目的时候遇到了如题的问题，浅浅记录一下。
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
2024年Web前端最新antd table 分页，前端 MVP模式详解
2401_84419493的博客
05-05 675
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。面试本质也是考试，面试题就起到很好的考纲作用。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
vue 部署到 iis 刷新报404
差池
09-28 3014
很纠结是否要写这篇分享，因为vue官网上已经有了解答，但是完全照搬它的内容还有问题，因此决定还是分享一下解决方法： 一：vue刷新报404 问题原因我就不说了，官网已经说了，想了解的看这里：vue刷新报404的原因 二：对于iis的解决方案如下 1：安装 IIS UrlRewrite 2：在你的网站根目录中创建一个 web.config(如果已经存在，就不用创建了) 文件，内容如下： <?xml version="1.0" encoding="UTF-8"?> <configuration
angular v8 保护署到IIS后刷新404问题解决
yuiku008的专栏
10-10 370
1.微软下载URL Rewrite 2.在部署目录添加web.config文件 <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Rule Root" stopProcessing="true"> <match url="(.*)" /> <cond.
vue项目部署iis服务器404问题
weixin_45310428的博客
09-09 709
关于部署服务器404问题 https://blog.youkuaiyun.com/bigbear00007/article/details/90718450
IIS部署vue项目页面刷新404,url重写问题解决办法
正一品程序员的博客
02-10 653
配置教程
部署Vue项目，运行刷新后404问题（已解决）
weixin_68714627的博客
11-30 1499
这样，Vue 应用将加载并确定展示哪个组件。针对 Nginx 服务器，可以通过修改配置文件来解决这个问题。经过分析，发现这是因为服务器无法正确处理前端路由（vue-router）导致的。针对这个问题，需要配置服务器，使得对所有前端路由路径的请求都返回。这样一来，无论用户访问的是哪个前端路由，Nginx 都会返回。在 Nginx 的配置中，添加一个新的。，然后前端路由就能正确地接管页面的显示了。同一个 index.html。，这样所有的路由都会被指向。index.html 文件。
Vue项目部署到IIS后刷新页面404问题分析及解决方案
04-18 814
1. 客户端路由 vs 服务器路由：Vue Router的history模式使用客户端路由，URL变化时不会向服务器请求新页面。2. IIS默认行为：IIS会尝试查找与URL路径匹配的实际文件/目录(如`/home/woxue`)，当找不到时返回404。3. 如果已存在`web.config`文件，只需添加`<rewrite>`部分到`<system.webServer>`中。3. 首次访问正常：从根路径进入应用时，Vue能正确加载，但直接访问或刷新子路由时IIS无法处理。刷新页面确认不再出现404错误。
IIS部署.NET+Vue项目：解决常见问题
"该文档主要讲述了如何在IIS上部署一个结合了.NET框架和Vue.js前端的项目，以及解决部署过程中可能遇到的问题。" 在部署.NET+Vue项目到IIS的过程中，有几个关键步骤和注意事项： 1. 运行环境：确保你的服务器配置...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值