将Vue和ASP.NE上的步骤-我们需要对项目进行编译和打包-保存并应用配置更改然后启动IIS网站

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

将Vue和ASP.NET部署在IIS上的步骤

一、编译和打包项目

首先，我们需要对项目进行编译和打包。

Vue 项目

使用以下命令编译 Vue 项目：

npm run build

这将生成一个 dist 文件夹，其中包含了所有需要部署的静态文件。

ASP.NET 项目

确保使用 Release 模式进行编译。在 Visual Studio 中选择 Release 模式，然后点击生成菜单下的 生成解决方案，或者使用命令行：

msbuild /p:Configuration=Release

这将生成一个 bin\Release 文件夹，其中包含所有需要部署的文件。

二、配置IIS并部署静态文件和API

接下来，我们需要配置 IIS 并部署静态文件和 API。

1、安装 IIS 和必要的组件

在 Windows 系统中，可以通过以下步骤安装 IIS：

打开“控制面板” -> “程序” -> “程序和功能” -> “启用或关闭 Windows 功能”。
在弹出的窗口中，勾选“Internet 信息服务”，并确保勾选了“Web 管理工具”和“万维网服务”。
点击“确定”完成安装。

此外，为了支持 ASP.NET Core 应用，还需要安装 .NET Core Hosting Bundle，可以从 Microsoft 官方网站下载并安装。

2、配置站点

在 IIS 管理器中，按照以下步骤配置站点：

右键点击左侧的“网站”节点，选择“添加网站”。
填写站点名称、物理路径（选择 Vue 项目的 dist 文件夹）和绑定信息（如端口号）。
添加一个新的应用程序池，选择“无托管代码”（No Managed Code），并确保勾选“启用 32 位应用程序”。
点击“确定”完成站点创建。

3、部署 ASP.NET API

将 ASP.NET 项目 bin\Release 文件夹中的所有文件复制到服务器上的某个目录中，例如 C:\aspnetapi。

在 IIS 管理器中，按照以下步骤配置 API 站点：

右键点击左侧的“网站”节点，选择“添加网站”。
填写站点名称、物理路径（选择刚才复制文件的目录）和绑定信息（如端口号）。
添加一个新的应用程序池，选择“.NET CLR 版本 v4.0.30319”，并确保勾选“启用 32 位应用程序”。
点击“确定”完成站点创建。

三、设置 URL 重写规则

为了确保 Vue 前端和 ASP.NET API 能够正确协同工作，需要设置 URL 重写规则。

1、安装 URL Rewrite 模块

从 IIS URL Rewrite 模块下载页面下载并安装该模块。

2、配置 URL 重写规则

在 IIS 管理器中，选择 Vue 项目站点，然后双击“URL 重写”图标。点击右侧的“添加规则” -> “空白规则”，按照以下步骤配置规则：

在“匹配 URL”部分，设置模式为 ^(.)$。
在“条件”部分，点击“添加”按钮，设置条件为 请求行 URL 不包含 .html 和“不匹配” ^.\.html$。
在“操作”部分，设置重写 URL 为 /{R:1}.html。
点击“确定”保存规则。

通过上述步骤，您已经成功将 Vue 前端和 ASP.NET API 部署在 IIS 上。总结主要步骤：

编译和打包 Vue 和 ASP.NET 项目。
配置 IIS 并部署静态文件和 API。
设置 URL 重写规则以确保应用程序正确运行。

进一步建议：

确保所有必要的 IIS 模块和组件已安装。
检查和配置适当的防火墙规则，以确保服务器可以正常访问。
设置 HTTPS 以提高应用程序的安全性。