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

news2025/2/22 20:47:19

目录

一、发布准备

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

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

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

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


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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

交互编程工具之——Jupyter

Jupyter 是什么&#xff1f; Jupyter 是一个开源的交互式编程和数据分析工具&#xff0c;广泛应用于数据科学、机器学习、教育和研究领域。其核心是 Jupyter Notebook&#xff08;现升级为 JupyterLab&#xff09;&#xff0c;允许用户在一个基于浏览器的界面中编写代码、运行…

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

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

easyexcel 2.2.6版本导出excel模板时,标题带下拉框及其下拉值过多不显示问题

需求背景&#xff1a;有一个需求要做下拉框的值有100多条&#xff0c;同时这个excel是一个多sheet的导入模板 直接用easyexcel 导出&#xff0c;会出现下拉框的值过多&#xff0c;导致生成出来的excel模板无法正常展示下拉功能 使用的easyexcel版本&#xff1a;<depende…

影视大数据分析新范式:亮数据动态代理驱动的实时数据采集方案

一、项目背景与挑战 在数据驱动决策的时代&#xff0c;影视数据分析对内容平台至关重要。但豆瓣等平台设有&#xff1a; 高频请求IP封禁机制User-Agent指纹检测请求频率阈值控制验证码验证系统 传统爬虫方案面临&#xff1a; 单一IP存活时间<5分钟采集成功率<30%数据更新…

免费体验,在阿里云平台零门槛调用满血版DeepSeek-R1模型

一、引言 随着人工智能技术的飞速发展&#xff0c;各类AI模型层出不穷。其中&#xff0c;DeepSeek作为一款新兴的推理模型&#xff0c;凭借其强大的技术实力和广泛的应用场景&#xff0c;逐渐在市场中崭露头角。本文将基于阿里云提供的零门槛解决方案&#xff0c;对DeepSeek模…

Cursor 与团队协作:提升团队开发效率

引言 在团队开发中&#xff0c;代码质量参差不齐、重复错误频发、代码审查耗时过长是制约效率的三大痛点。据 GitHub 调查&#xff0c;开发者平均每周花费 4.3 小时修复他人代码问题&#xff0c;而 60% 的合并请求&#xff08;PR&#xff09;因风格或低级错误被驳回。Cursor 作…

激光工控机在自动化生产线中有什么关键作用?

激光工控机作为自动化生产线的核心设备&#xff0c;通过高精度控制、快速响应和智能化集成&#xff0c;在提升效率、保障质量、实现柔性制造等方面发挥着不可替代的作用。以下是其关键作用的具体分析&#xff1a; 一、实现高效连续生产&#xff1a; 1.高速加工能力&#xff1…

深度解析应用层协议-----HTTP与MQTT(涵盖Paho库)

HTTP协议概述 1.1 HTTP的基本概念 HTTP是一种应用层协议&#xff0c;使用TCP作为传输层协议&#xff0c;默认端口是80&#xff0c;基于请求和响应的方式&#xff0c;即客户端发起请求&#xff0c;服务器响应请求并返回数据&#xff08;HTML&#xff0c;JSON&#xff09;。在H…

WordPress“更新失败,响应不是有效的JSON响应”问题的修复

在使用WordPress搭建网站时&#xff0c;许多人在编辑或更新文章时&#xff0c;可能会遇到一个提示框&#xff0c;显示“更新失败&#xff0c;响应不是有效的JSON响应”。这个提示信息对于不了解技术细节的用户来说&#xff0c;太难懂。其实&#xff0c;这个问题并不复杂&#x…

【开源】思维导图:思绪思维导图 (Simple Mind Map)

目录 1. 思绪思维导图 2. 本地使用 3. 在线网页 1. 思绪思维导图 思绪思维导图&#xff0c;英文名称为Simple mind map&#xff0c;简称为SSM。 开源、免费 GitHub网址 支持多平台&#xff1a;Windows&#xff0c;Mac和Linux 支持在线和离线使用 2. 本地使用 安装包下载地址…

国产编辑器EverEdit -告别东找西找!一键打开当前文件所在目录!

1 文件操作 2 应用场景 在文件编辑过程中&#xff0c;有时需要对文件进行一些操作&#xff0c;比如&#xff1a;在命令窗口输入文件路径、文件名&#xff0c;进入到文件目录&#xff0c;对文件进行压缩等&#xff0c;如果没有直达命令&#xff0c;用户需要通过文件管理器找到目…

UE引擎游戏加固方案解析

据VGinsights的报告&#xff0c;近年来UE引擎在过去几年中市场占比显著增长&#xff0c;其中亚洲市场增幅达到了30%&#xff0c;随着UE5的推出和技术的不断进步&#xff0c;UE引擎在独立开发者和移动游戏开发中的应用也在逐步增加。 UE引擎的优势在于强大的画面表现与视觉特效…

[kubelet-check] It seems like the kubelet isn‘t running or healthy.

执行k8s时报错&#xff1a; [kubelet-check] It seems like the kubelet isn’t running or healthy. [kubelet-check] The HTTP call equal to ‘curl -sSL http://localhost:10248/healthz’ failed with error: Get "http://localhost:10248/heal ** 解决办法如下&a…

C# 背景 透明 抗锯齿 (效果完美)

主要是通过 P/Invoke 技术调用 Windows API 函数 gdi32.dll/user32.dll&#xff0c;同时定义了一些结构体来配合这些 API 函数的使用&#xff0c;常用于处理图形绘制、窗口显示等操作。 运行查看效果 局部放大&#xff0c;抗锯齿效果很不错,尾巴毛毛清晰可见。 using System; u…

关于uniApp的面试题及其答案解析

我的血液里流淌着战意&#xff01;力量与智慧指引着我&#xff01; 文章目录 1. 什么是uniApp&#xff1f;2. uniApp与原生小程序开发有什么区别&#xff1f;3. 如何使用uniApp实现条件编译&#xff1f;4. uniApp支持哪些平台&#xff0c;各有什么特点&#xff1f;5. 在uniApp中…

【Java场景题】MySQL死锁排查

大家好&#xff0c;今天XiXi给大家分享一个MySQL死锁排查的实验&#xff0c;文章主要有&#xff1a; 通过show engine innodb status&#xff0c;查看最近一次死锁信息开启innodb_print_all_deadlocks&#xff0c;在错误日志中能够记录所有死锁信息通过解析binlog日志定位死锁…

LabVIEW心音信号采集与分析系统

基于LabVIEW软件的心音信号采集与分析系统能够实现心音的采集、去噪和分析。系统利用LabVIEW的强大功能和灵活性&#xff0c;通过模块化设计&#xff0c;实现了心音信号的高效处理和分析&#xff0c;具备深度学习和身份识别的实验能力&#xff0c;适用于医学和生物工程领域的研…

【Scrapy】Scrapy教程7——存储数据

上一节我们对爬虫程序的默认回调函数parse做了改写,提取的数据可以在Scrapy的日志中打印出来了,光打印肯定是不行的,还需要把数据存储,数据可以存到文件,也可以存到数据库,我们一一来看。 存储数据到文件 首先我们看看如何将数据存储到文件,在讲[[【Scrapy】Scrapy教程…

基础入门-算法解密散列对称非对称字典碰撞前后端逆向MD5AESDESRSA

知识点&#xff1a; 0、算法类型-单向散列&对称性&非对称性 1、算法识别加解密-MD5&AES&DES&RSA 2、解密条件寻找-逻辑特征&源码中&JS分析 应用场景&#xff1a; 1、发送数据的时候自动将数据加密发送&#xff08;只需加密即可&#xff09; 安全…

在UBUNTU下搭建Deepseek

在UBUNTU下搭建Deepseek 一、安装UBUNTU 这个就不多说了&#xff0c;无外乎下载UBUNTU的iso&#xff0c;然后用UltraIso制作U盘&#xff0c;然后重启设置启动盘&#xff0c;安装… 二、安装Ollama curl -sSfL https://ollama.com/install.sh | sh这里可能需要你先安装curl工…