.net6+IIS+vue 处理history路由模式下,刷新出404问题

近期做项目希望吧vue做的网站部署到 IIS上和.net6 做的后台集成在一起.

遇到的问题:

一.vue 构建的网页如何在.net6 项目中放置

        方法:1.把vue项目 npm run build 后. 找到生成的文件.默认是在/dist文件夹中.

                

 

                2.在.net6项目中创建文件夹wwwroot文件夹, 创建后会变成这种图标,不变也没关系

 

                3.把dist文件夹中的文件 粘贴到 wwwroot文件夹中

                4.在.net6 的 program.cs 中添加代码

                

结束:.vue项目和.net6就能一起部署,共用一个IIS.

二.由于vue-router的history模式会让浏览器地址栏加后缀,这导致刷新时会出现404错误.

        原因:刷新时浏览器根据地址栏的地址请求服务器,iis中没有找到这个路径对应的接口或文件,所以报错.

        解决方法:

      1.安装 url-rewrite

url-rewrite下载地址       

 

 安装完成后在IIS中会有URL重写功能

2.进入URL重写,添加规则--空白规则.填写相应的规则

 上面这个配置的意思是:当请求的地址中不包含 /api/ 时,重定向到 /..举例:http://127.0.0.1/index/home  这个请求会重定向到 http:127.0.0.1/ 配合代码中的默认页设置.会请求index.html页.浏览器获取后会进行vue-router配置的处理,实现正确的页面刷新.

3.通过配置文件进行设置(需要安装 url rewrite)   在.net6项目中添加web.config 配置文件 修改配置文件为

 

 复制如下代码.正常部署就行.下面的代码和用URL 重写 配置的一样.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
	 
	<system.webServer>
		<handlers>
			<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
		</handlers>
		<aspNetCore processPath=".\WebClient.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
		<rewrite>
			<rules>
				<rule name="自定义名称">
					<match url="/api/" negate="true" />
					<action type="Rewrite" url="/" logRewrittenUrl="true" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>