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

将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:

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

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

2、配置站点

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

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

3、部署 ASP.NET API

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

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

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

三、设置 URL 重写规则

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

1、安装 URL Rewrite 模块

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

2、配置 URL 重写规则

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

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

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

进一步建议:

相关问答FAQs

以下是一些常见问题的解答:

1. 如何将Vue应用部署到IIS?

部署Vue应用到IIS需要以下步骤:

  1. 打开命令行工具,进入Vue项目的根目录。
  2. 运行命令,该命令会将Vue项目编译为静态文件。
  3. 在Vue项目的根目录中生成了一个文件夹,将该文件夹中的所有文件复制到IIS的网站根目录中。
  4. 在IIS中创建一个新的网站,将网站的物理路径设置为Vue项目的根目录。
  5. 配置IIS的URL重写规则,以确保所有的请求都指向Vue应用的入口文件。
  6. 保存并应用配置更改,然后启动IIS网站。

2. 如何将ASP.NET应用部署到IIS?

将ASP.NET应用部署到IIS需要以下步骤:

  1. 打开Visual Studio,并在解决方案资源管理器中右键单击ASP.NET项目,选择“发布”。
  2. 在发布配置窗口中,选择目标为“IIS、FTP等”以及目标服务器的相关设置。
  3. 点击“发布”按钮,Visual Studio会将ASP.NET应用程序编译并将文件复制到指定的目标服务器。
  4. 在IIS中创建一个新的网站,将网站的物理路径设置为ASP.NET应用程序的根目录。
  5. 配置IIS的应用程序池,选择适当的.NET CLR版本和其他相关设置。
  6. 配置IIS的URL重写规则,以确保所有的请求都指向ASP.NET应用程序的入口文件。
  7. 保存并应用配置更改,然后启动IIS网站。

3. 如何在同一个IIS服务器上同时部署Vue和ASP.NET应用?

在同一个IIS服务器上同时部署Vue和ASP.NET应用需要以下步骤:

  1. 将Vue应用和ASP.NET应用分别部署到不同的虚拟目录中。
  2. 配置IIS的URL重写规则,以确保Vue应用的请求指向Vue应用的入口文件,而ASP.NET应用的请求指向ASP.NET应用的入口文件。
  3. 配置IIS的应用程序池,为Vue应用和ASP.NET应用分别选择适当的.NET CLR版本和其他相关设置。
  4. 保存并应用配置更改,然后启动IIS网站。