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

最新推荐文章于 2025-05-30 09:34:33 发布
最新推荐文章于 2025-05-30 09:34:33 发布
阅读量7.2k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： .NET vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xhl_james/article/details/106495159
本文介绍了解决使用vue-cli创建并由webpack打包的项目，在IIS上部署时遇到的404错误问题。通过安装URL重写工具及配置入站规则，实现正确解析单页应用路由。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

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

1、安装URL重写工具

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

在这里插入图片描述

2、编写入站规则

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

IIS部署VUE刷新404问题如何解决？
猿小白的博客
03-31 1346
新建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
差池
09-28 2930
很纠结是否要写这篇分享，因为vue官网上已经有了解答，但是完全照搬它的内容还有问题，因此决定还是分享一下解决方法： 一：vue刷新报404 问题原因我就不说了，官网已经说了，想了解的看这里：vue刷新报404的原因 二：对于iis的解决方案如下 1：安装 IIS UrlRewrite 2：在你的网站根目录中创建一个 web.config(如果已经存在，就不用创建了) 文件，内容如下： <?xml version="1.0" encoding="UTF-8"?> <configuration
Vue部署后刷新页面出现404
Star_Inori的博客
06-28 1634
Vue部署后刷新页面出现404
IIS 部署 Vue 项目，F5刷新界面报 404
IT_laohu的博客
05-12 3105
在服务器上部署 Vue 项目，通过默认主页进入到其他页面时，如果直接刷新界面会报 404错误。 解决这个问题的话，需要在IIS 中设置 Url 重写规则。具体操作步骤如下： 1、双击打开Url 重写 2、点击右侧添加规则 3、选择 入栈规则中的空白规则 4、填写规则名称，这个自定义。模式内容填写 .* 5、点击 条件 栏右侧箭头，会出现逻辑分组选择框。点击添加 6、添加条件，条件输入：{REQUEST_FILENAME}。添加两个条件。 7、编...
解决Nginx部署Vue项目刷新页面404问题
最新发布
lsk0909的博客
05-30 816
摘要： Vue等SPA应用部署在Nginx时，刷新子路由会出现404错误，因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括： 修改Nginx配置（推荐）：添加try_files $uri $uri/ /index.html，将所有请求重定向到前端路由； 启用Vue Router的history模式； 改用hash模式（URL含#，不推荐）。 需确保静态资源路径正确，配置后执行nginx -t验证并重载服务。若项目非根路径部署，需同步调整Vue Router的base选项。
IIS部署vue项目刷新404问题
fankse的博客
07-13 875
注意： 新建文件后得重启下iis配置得web站点。在dist目录下新建web.config文件。
vue3前端部署之后刷新页面报404
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
02-06 701
在完成项目开发后将前端项目部署到iis之后刷新界面出现了404错误，这个错误原因是使用了hash模式路由，要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。
2024年Web前端最新antd table 分页，前端 MVP模式详解
2401_84419493的博客
05-05 602
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。面试本质也是考试，面试题就起到很好的考纲作用。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
IIS部署VUE项目的路由相关问题（404）
weixin_47673008的博客
06-07 594
主要原因是因为在history模式下，Vue Router会尝试模仿传统的浏览器导航，使用HTML5的history.pushState API来改变URL，而不刷新页面。这意味着URL看起来会更像标准的URL，在这种模式下，当用户直接访问一个路由（如刷新页面或通过URL访问），服务器需要能够处理这个URL并返回index.html，然后由Vue Router根据URL渲染相应的视图。模式，正常部署完会发现刷新页面时会直接404，而且不是自己在路由中配置的404页面，是IIS自带的。
IIS部署.NET+Vue项目.docx
05-25
iis 部署 .net + vue 项目知识点总结 在本文中，我们将对 iis 部署 .net + vue 项目的知识点进行总结，涵盖从项目的基本环境到 api 的配置、https 的设置、Swagger 的使用等多个方面。 一、基本环境 首先，我们...
IIS上部署Vue网站 由于history模式导致刷新页面出现404报错的解决方式
xsw0605的博客
04-16 1780
在IIS上部署Vue网站，网页点击刷新按钮后出现如下图所示的错误； 原因主要是配置文件中Router配置了history模式 解决方式，为IIS安装Url重写工具，并进行相应的配置，安装方式以及配置操作如下； 1、下载Web平台安装程序，这里最后使用的是5.1的版本，下载可以到百度搜索一下，3.0的版本测试的时候无法打开 安装完成后在IIS可看到如下图标 打开后如下图所示...
解决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 错误页面
iis部署vue项目，刷新404问题
ANNENBERG的博客
06-27 722
1.进行URL重写 2.如果没有URL重写，需要去下载安装 下载所需模块，下载地址：urlrewrite 3.安装后，双击打开，右击添加规则，或者点击右侧“添加规则” 4.填写名称 完成后.点击右侧 应用--返回规则，再次浏览可以刷新了 ...
angular v8 保护署到IIS后刷新404问题解决
yuiku008的专栏
10-10 335
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 679
关于部署服务器404问题 https://blog.youkuaiyun.com/bigbear00007/article/details/90718450
IIS部署vue项目页面刷新404,url重写问题解决办法
正一品程序员的博客
02-10 628
配置教程
部署Vue项目，运行刷新后404问题（已解决）
weixin_68714627的博客
11-30 1384
这样，Vue 应用将加载并确定展示哪个组件。针对 Nginx 服务器，可以通过修改配置文件来解决这个问题。经过分析，发现这是因为服务器无法正确处理前端路由（vue-router）导致的。针对这个问题，需要配置服务器，使得对所有前端路由路径的请求都返回。这样一来，无论用户访问的是哪个前端路由，Nginx 都会返回。在 Nginx 的配置中，添加一个新的。，然后前端路由就能正确地接管页面的显示了。同一个 index.html。，这样所有的路由都会被指向。index.html 文件。
Vue部署在IIS上后发布单页面刷新报错提示:404
Bibabu的博客
05-25 5518
写好的系统打包，运行指令:npm run build打包后会生成一个文件名为:dist文件夹,将该文件夹发布至IIS就可以进行访问了,但有的小伙伴会发现,单机每个页面都可以,但是却不能刷新页面，一刷新页面就会报错：404 not found这是因为,我们将文件打包后，与原来开发文件各个路径已经不同了,这是就要看看我们的路由是怎么配置的了,网上有很多方法解决方法一,配置nginx文件:serve...
单页面应用部署到iis上可以正常打开，刷新就404
逆袭的菜鸟X
03-26 1123
综上所述，要解决Dumi打包网站在IIS上刷新出现404的问题，重点在于配置正确的URL重写规则，确保所有非文件或目录的请求都被重定向到。请检查并按照上述步骤进行排查与设置。如果问题依然存在，可能需要进一步检查IIS日志以获取更详细的错误信息，或者检查Dumi生成的。这个规则会检查请求的URL是否对应一个实际存在的文件或目录。如果不是，则将请求重写到网站根目录（这样，即使直接访问内部路由，也能确保加载正确的HTML文件来处理路由。文件是否存在特定于项目的配置需求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值