.NET + Vue3 的前后端项目在IIS的发布

目录

一、发布准备

1、安装 IIS

2、安装 Windows Hosting Bundle（.NET Core 托管捆绑包）

3、安装 IIS URL Rewrite

二、项目发布

1、后端项目发布

2、前端项目发布

3、将项目部署到 IIS中

三、网站配置

1、IP配置

2、防火墙配置

3、跨域配置

4、web.config 文件配置

四、常见错误处理

1、CORS 错误

2、404.0错误

3、405错误

4、500.32错误

---

一、发布准备

想要发布一个项目，首先就要有一个可以正常运行的项目，这个肯定是必须的。废话不多说，下面跟着我一起在 IIS 发布一个项目吧。

1、安装 IIS

在搜索栏搜索 "windows 功能" ,打开找到里面的 “Internet Information serices” 和 “Internet Information Services 可承载的 Web 核心”。将其选上点击[确定]。

在安装 IIS 后，可以重启一下电脑，不然后面可能会报错。

2、安装 Windows Hosting Bundle（.NET Core 托管捆绑包）

点击官网下载 Windows Hosting Bundle

点击下载后安装，一直下一步傻瓜式安装。下同。

3、安装 IIS URL Rewrite

根据自己的电脑旋转下载 IIS URL Rewrite。

点击官网下载 IIS URL Rewrite

二、项目发布

1、后端项目发布

1）在项目中，右键项目，在弹出框中点击 [发布]。

2）选择 [文件夹] 后，点击 [下一步]

3）然后可以修改文件位置，点击 [完成]。

4）可以重命名文件夹，然后点击 [显示所有设置]，进行设置。

5）设置 部署模式 和 目标运行时，设置后点击保存。

部署模式有两种模式，即依赖框架和独立，两者的区别大致为以来框架模式部署后需要目标电脑有运行环境，而独立模式部署后是一个独立的软件，可以直接使用而不需要用户另外安装运行环境。

重要：（踩坑）在设置 目标运行时 的时候，一定要根据自己的电脑来选择，不然后面部署后会报错。

6）最后点击 [发布]，等待发布完成。

7）在发布完成后，项目文件中多了个 【publish】文件夹，里面全是发布好后的 .dll 文件和配置文件。这个文件夹名称与步骤 2）中的文件夹命名一致。

2、前端项目发布

在vue 项目的终端，使用命令 npm run build 打包项目。

npm run build

在命令执行完成之后，会在项目目录中有一个 dist 文件，这个就是前端打包好文件夹。

3、将项目部署到 IIS中

1）在 C 盘外的其它盘中新建一个文件夹，将前面发布项目得到的文件中的内容复制到这个文件夹中来。如果是放在 C盘，那么后面在文件操作的时候，会因为 IIS操作 C盘的权限带来功能上的错误，如文件的访问、修改和删除。

2）打开 IIS，在 IIS的 [网站] 中 [右键] 添加网站。在配置好网站后，点击 [确定] 后网站就创建成功了。这里端口一定要修改，避免端口已经被使用后出现报错。

3）在 [应用程序池] 中，选中部署的项目，分别设置 .NET CLR版本 和 托管管理模式。重启网站，就可以点击浏览网站了。

三、网站配置

1、IP配置

1）安装 win + R键，输入cmd打开命令行工具。

2）在命令行工具中输入 ipconfig 查看本机 IP 信息。

3）在 IIS 的网站中，选择部署的项目，点击 [绑定] ，分别配置 IP 地址。IP 地址为本地的 IP。

2、防火墙配置

项目部署后，如果想要在多台设备上进行访问，那么需要进行防火墙配置，允许其它设备访问服务器的网址的端口。

1）在防火墙设置中，点击 [高级设置] 

2）在 [入站规则] 新建规则，选择 [端口] 后点击[下一步]。

3）根据需要，选择数据传输协议，配置端口。这里的端口是网站中配置的端口，必须保持一致。

下一步后，选择 [允许连接]，然后在下一步，默认全部，然后再下一步，命名规则，并进行描述。

3、跨域配置

4、web.config 文件配置

Vue3使用 npm run build 命令发布后，生成的 dist中，可能会没有 web.config配置文件，需要我们手动配置。新建 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、CORS 错误

报 CORS错误是由浏览器的同源策略引起的，即跨域问题。有时候明明在后端代码中正确地配置了跨域，但是部署后它还是报这个错误，至于是什么原因，暂时还不知道是什么原因。既然知道这报这个错误是跨域的问题，那么只需要在后端项目的配置文件中配置跨域就可以了。

找到 web.config文件，添加下面代码。

 <httpProtocol><customHeaders><!--响应类型 (用逗号隔开，对预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH)--><add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS"/><!--响应头设置（用于预检请求中，列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。注意以下这些特定的首部是一直允许的：Accept, Accept-Language, Content-Language, Content-Type （但只在其值属于 MIME 类型 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种时）无需特意声明。）--><add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/><!--响应头指定了该响应的资源是否被允许与给定的origin共享，对于不需具备凭证（credentials）的请求，服务器会以“*”作为通配符，从而允许所有域都具有访问资源的权限，如需指定域则可以设置允许跨域访问的网址。--><add name="Access-Control-Allow-Origin" value="*" /><remove name="X-UA-Compatible"/><!--<add name="X-UA-Compatible" value="IE=8;IE=10;IE=9"/>--><add name="X-UA-Compatible" value="IE=11;IE=10;IE=9"/></customHeaders>
</httpProtocol>

2、404.0错误

这个错误是你项目文件夹中没有项目导致的，看看你的网址指向的物理路径是否正确，在指向的这个文件夹中是否有项目存在。

3、405错误

网址部署好后，想测试网址的功能是否正常，发现网址的数据获取和新增功能都正常，但当修改和删除数据时，发现网址报405错误，这是什么原因造成的呢？

其实，这是因为 IIS默认注册了一个名为"WebDAVModule"的自定义HttpModule，它会默认拒绝 HTTP 的 PUT、DELETE请求，只允许 HTTP的 GET、POST请求。想要解决这个问题也很简单：

在 IIS的网站中，找到 [模块]后点击 [打开功能]，找到 WebDAVModule，将其删除即可。

如果将 WebDAVModule 删除后发现还是报这个错误，那么在项目文件中，打开 web.config文件，在 system.webServer 里面添加 modules，将 HttpModule 移除。

<configuration><system.webServer><modules runAllManagedModulesForAllRequests="true"><remove name="webDAVModule"/></modules><system.webServer>
</configuration>

作用是移除 IIS 中的 "WebDAVModule" 模块，并允许所有请求运行托管模块。这个配置适用于需要使用 PUT 和 DELETE 请求的应用程序或需要托管模块对所有请求进行处理的情况。

4、500.32错误

1）在程序应用池中，找到对应的网站，在 [基础设置] 中把 [.NET CLR版本] 设置成 [五代码托管]和 [托管管理模式] 设置成 [集成] 。

2）然后在 [高级设置] 中，把 [启用 32位应用程序] 的值设置成 [false]，然后下滑，找到 [标识]，将 [标识] 的值设置成 [LocalSystem]。

完成上面的设置后，重启网站，如果开始报这个错误，那么就要考虑你的项目发布的问题了，重新发布一次项目。

重新发布项目时，要特别注意发布配置，[目标运行时] 的配置一定得跟 服务器的一致。

最近发布了一个项目，踩了很多坑，值得做一个笔记，免得以后还往坑里面跳。希望这个笔记能给读者带来帮助，如果你也在发布项目时踩了坑，欢迎在评论区分享，让我们一起避坑，一起学习成长。

---

好记性不如烂笔头，在学习的路上留下点痕迹。希望能给大家带来帮助，也期待您的点赞和讨论。

若有不足之处，还请斧正。