近期做项目希望吧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
安装完成后在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>