.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]。

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

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

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


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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/973203.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑想安装 Windows 11 需要开启 TPM 2.0 怎么办?

尽管 TPM 2.0 已经内置在许多新电脑中&#xff0c;但很多人并不知道如何激活这一功能&#xff0c;甚至完全忽略了它的存在。其实&#xff0c;只需简单的几步操作&#xff0c;你就能开启这项强大的安全特性&#xff0c;为你的数字生活增添一层坚固的防护屏障。无论你是普通用户还…

嵌入式开发岗位认识

目录 1.核心定义2.岗位方向3.行业方向4.技术方向5.工作职责6.核心技能7.等级标准8.优势与劣势9.市场薪资10. 发展路径11. 市场趋势12. 技术趋势 1.核心定义 嵌入式系统&#xff1a; 以应用为中心&#xff0c;以计算机技术为基础&#xff0c;软硬件可裁剪的专用计算机系统 特点…

爱普生 SG-8101CE 可编程晶振在笔记本电脑的应用

在笔记本电脑的精密架构中&#xff0c;每一个微小的元件都如同精密仪器中的齿轮&#xff0c;虽小却对整体性能起着关键作用。如今的笔记本电脑早已不再局限于简单的办公用途&#xff0c;其功能愈发丰富多样。从日常轻松的文字处理、网页浏览&#xff0c;到专业领域中对图形处理…

Python VsCode DeepSeek接入

Python VsCode DeepSeek接入 创建API key 首先进入DeepSeek官网&#xff0c;https://www.deepseek.com/ 点击左侧“API Keys”&#xff0c;创建API key&#xff0c;输出名称为“AI” 点击“创建"&#xff0c;将API key保存&#xff0c;复制在其它地方。 在VsCode中下载…

基于eBPF的全栈可观测性系统:重新定义云原生环境诊断范式

引言&#xff1a;突破传统APM的性能桎梏 某头部电商平台采用eBPF重构可观测体系后&#xff0c;生产环境指标采集性能提升327倍&#xff1a;百万QPS场景下传统代理模式CPU占用达63%&#xff0c;而eBPF直采方案仅消耗0.9%内核资源。核心业务的全链路追踪时延从900μs降至18μs&a…

java项目之风顺农场供销一体系统的设计与实现(源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的风顺农场供销一体系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 风顺农场供销…

Spring MVC 的核心以及执行流程

Spring MVC的核心 Spring MVC是Spring框架中的一个重要模块&#xff0c;它采用了经典的MVC&#xff08;Model-View-Controller&#xff09;设计模式。 MVC是一种软件架构的思想&#xff0c;它将软件按照模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;…

SQLMesh 系列教程6- 详解 Python 模型

本文将介绍 SQLMesh 的 Python 模型&#xff0c;探讨其定义、优势及在企业业务场景中的应用。SQLMesh 不仅支持 SQL 模型&#xff0c;还允许通过 Python 编写数据模型&#xff0c;提供更高的灵活性和可编程性。我们将通过一个电商平台的实例&#xff0c;展示如何使用 Python 模…

苍穹外卖知识点

导入依赖 Component Aspect public class MyselfAspect{Before("excution(* com.services.*.(..))")public myBefore(JointPoint jointPoint){System.out.println("在前面执行");} }只要注意如何使用Before注解就行了&#xff0c;里面存放的是*&#xff…

MySQL系列之身份鉴别(安全)

导览 前言Q&#xff1a;如何保障MySQL数据库身份鉴别的有效性一、有效性检查 1. 用户唯一2. 启用密码验证3. 是否存在空口令用户4. 是否启用口令复杂度校验5. 是否设置口令的有效期6. 是否限制登录失败尝试次数7. 是否设置&#xff08;超过尝试次数&#xff09;锁定的最小时长…

OneNote手机/平板“更多笔记本”中有许多已经删掉或改名的,如何删除

问题描述&#xff1a; OneNote 在手机或平板上添加“更多笔记本”中&#xff0c;有许多已经删掉或改名的笔记本&#xff01;如何删除&#xff1f; OR&#xff1a;如何彻底删除OneNote中的笔记本&#xff1f; 处理做法&#xff1a; 这个列表对应365里面的【最近打开】&#…

区块链共识机制深度揭秘:从PoW到PoS,谁能主宰未来?

区块链的技术背后&#xff0c;最大的挑战之一就是如何让多个分布在全球各地的节点在没有中心化管理者的情况下达成一致&#xff0c;确保数据的一致性和安全性。这一切都依赖于区块链的核心——共识机制。共识机制不仅决定了区块链的安全性、效率和去中心化程度&#xff0c;还对…

观察者模式说明(C语言版本)

观察者模式主要是为了实现一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时&#xff0c;会通知所有观察者对象&#xff0c;使它们能够自动更新自己。下面使用C语言实现了一个具体的应用示例&#xff0c;有需要的可以参考…

Linux System V - 消息队列与责任链模式

概念 消息队列是一种以消息为单位的进程间通信机制&#xff0c;允许一个或多个进程向队列中发送消息&#xff0c;同时允许一个或多个进程从队列中接收消息。消息队列由内核维护&#xff0c;具有以下特点&#xff1a; 异步通信&#xff1a;发送方和接收方不需要同时运行&#x…

微信小程序客服消息接收不到微信的回调

微信小程序客服消息&#xff0c;可以接收到用户进入会话事件的回调&#xff0c;但是接收不到用户发送消息的回调接口。需要在微信公众平台&#xff0c;把转发消息给客服的开关关闭。需要把这个开关关闭&#xff0c;否则消息会直接发送给设置的客服&#xff0c;并不会走设置的回…

pycharm社区版有个window和arm64版本,到底下载哪一个?还有pycharm官网

首先pycharm官网是这一个。我是在2025年2月16日9:57进入的网站。如果网站还没有更新的话&#xff0c;那么就往下滑一下找到 community Edition,这个就是社区版了免费的。PyCharm&#xff1a;适用于数据科学和 Web 开发的 Python IDE 适用于数据科学和 Web 开发的 Python IDE&am…

风险价值VaR、CVaR与ES

风险价值VaR、CVaR与ES 一、VaR风险价值1. VaR的定义及基本概念2.VaR的主要性质3.风险价值的优缺点 二、CVaR条件风险价值与ES预期损失1.CVaR的基本概念2.性质3.ES预期损失 一、VaR风险价值 1. VaR的定义及基本概念 20年前&#xff0c;JP的大佬要每天下午收盘后的4:15在桌上看…

老游戏回顾:d2

游戏中玩家创建属于自己的角色&#xff0c;在一片片暗黑大地上奔跑、杀敌、寻宝、成长&#xff0c;最终打败统治各个大陆的黑暗势力&#xff0c;拯救游戏中的各个种族。 《暗黑破坏神II》的制作团队包括编程小组、运动物体制作小组和背景制作小组。游戏设计很大程度上是开放的&…

The Heliosphere 日球层

转自 The Heliosphere - NASA This is an artists concept of our Heliosphere as it travels through our galaxy with the major features labeled. Termination Shock: Blowing outward billions of kilometers from the Sun is the solar wind, a thin stream of electrica…

el-dropdown选中效果

vue2版本 <template><el-dropdown size"mini" command"handleCommand"><span class"el-dropdown-link">{{ selectedOption }}<i class"el-icon-arrow-down el-icon--right"></i></span><el-d…