修复vue单页面应用直接访问url会出现404的问题

深藏阁楼爱情的钟 2021-07-25 23:21 876阅读 0赞

1.  在网站根目录中创建一个 `web.config`文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
    	<system.webServer>
    		<rewrite>
    			<rules>
    				<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
    					<match url="(.*)" />
    					<conditions logicalGrouping="MatchAll">
    						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    					</conditions>
    					<action type="Rewrite" url="/" />
    				</rule>
    			</rules>
    		</rewrite>
    	</system.webServer>
    </configuration>

1.  设置 `<match url="(.*)" />` 为想要匹配的路径，  
    如：我想所有以 `nav/` 路由的子页面都能通过 url 进行访问则配置为如下：

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
    	<system.webServer>
    		<rewrite>
    			<rules>
    				<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
    					<match url="^nav/(.*)" />
    					<conditions logicalGrouping="MatchAll">
    						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    					</conditions>
    					<action type="Rewrite" url="/" />
    				</rule>
    			</rules>
    		</rewrite>
    	</system.webServer>
    </configuration>

发表评论取消回复

表情：

评论列表（有 0 条评论，876人围观）

还没有评论，来说两句吧...

相关阅读

相关刷新vue页面不出现404的方法

最近在做vue项目的时候遇到一个问题，就是执行完一个方法后需要刷新页面才能更新页面的数据，但是调用刷新页面的函数后页面报404了，当然这是在测试环境，本地开发环境是没有这个问题

柔情只为你懂/ 2023年10月11日 23:16/ 0 赞/ 59 阅读

相关 nignx解决vue部署服务器刷新页面出现404问题

> 在部署前后端分离项目项目的时候，有可能会遇到能访问页面，但是刷新页面却404。 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_tex

左手的ㄟ右手/ 2023年09月30日 08:55/ 0 赞/ 33 阅读

相关 vue部署访问单页面404问题

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[点击跳转到教程][Link 1] vue单页面的启动页面是index.html，路由的路

野性酷女/ 2023年02月17日 02:45/ 0 赞/ 18 阅读

相关 vue element打包部署后前端访问页面出现404

element项目打包部署至服务器后，前端访问页面出现404页面，无法进入其他页面。在vue-router路由对象中，路由有两种模式：hash和history，而我一般使用

一时失言乱红尘/ 2022年10月25日 14:22/ 0 赞/ 308 阅读

相关 springmvc出现页面引用的js，css等静态资源访问出现404问题

现象： springmvc框架搭建完，jsp页面引用的js，css等浏览器抛出404错误。可能原因：在springmvc前端控制器（web.xml文件

迷南。/ 2022年07月11日 11:11/ 0 赞/ 581 阅读

相关 vue-route+webpack部署单页路由项目，访问刷新出现404问题

问题描述：最近在开发cms的时候使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，自己在服务器端配置nginx。部署完成后，访问没问

缺乏、安全感/ 2022年06月17日 01:24/ 0 赞/ 440 阅读

相关 Vue单页面应用

总结如下：单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新； <1>在vue搭建的

谁践踏了优雅/ 2022年05月26日 04:22/ 0 赞/ 289 阅读

相关 vue 在nginx下页面刷新出现404问题

vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决一、vue 在nginx下页面刷新出现404 1、如果是在根目录

傷城~/ 2022年01月17日 02:43/ 0 赞/ 501 阅读

相关 vue访问去除# 使用 history模式，会出现404需要配置nginx

参考：[vue路由的两种模式配置以及history模式下面后端如何配置][vue_history] const router = new VueRouter(\{

逃离我推掉我的手/ 2021年11月17日 12:40/ 0 赞/ 557 阅读

相关修复vue单页面应用直接访问url会出现404的问题

1. 在网站根目录中创建一个 `web.config`文件，内容如下： <?xml version="1.0" encoding="UTF-8"?> <co

深藏阁楼爱情的钟/ 2021年07月25日 23:21/ 0 赞/ 877 阅读