vue 部署到本机IIS 部署 SPA 应用

  安装

URL Rewrite

Works With: IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10

URL Rewrite : The Official Microsoft IIS Site

目前电脑IIS是6版本的,以下的方法不太合适操作。目前用Nginx部署,够用了。

nginx配置参考:

uni-app 前面项目(vue)部署到本地win系统Nginx上_Lan.W的博客-CSDN博客

参考:

目前公司的 Web 项目是 SPA 应用,采用前后端分离开发,所以有时也会倒腾 Vue 框架。

在 Devops 实践中,容器部署成为良方和事实标准。

但是在开发和自测阶段,不要滥打镜像,前后端团队还需要一个友好的联调+自测的验证环境,最友好、最顺手的 web 服务器当属 IIS,(后端 API 已经使用 WebDeploy 部署到 IIS),本文记录使用 IIS 托管 Vue 应用的姿势。

前置条件:安装IIS、Url Rewrite Module !!!

1. 部署Vue应用

我们以Github上Vue Todo应用为例,执行 yarn build

图片

如果 build 成功,你会发现生成了一个 dist 静态资源文件夹。

2. 创建web.config

将 yarn 生成的 dist 文件夹拷贝到 C:\dist,并添加以下 web.config 文件, 这个文件实际是我们在 IIS Url-Rewrite module 上配置的结果。

<?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><httpErrors><remove statusCode="404" subStatusCode="-1" /><remove statusCode="500" subStatusCode="-1" /><error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /><error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /></httpErrors><modules runAllManagedModulesForAllRequests="true"/></system.webServer></configuration>

3. 在IIS上部署Vue应用

图片

点击确定

4.运行Vue应用

图片

Nice!现在你的 Vue 静态应用就运行在IIS上。

But, 在前后端分离模式中,我们的 Vue 应用不仅有静态资源,还要发起动态 api 请求。

一般情况下webpack打包后的api请求路径是/, 会尝试请求同域名下api资源, 实际并不存在。

我们需要将对 Vue 应用的 api 请求代理到真实后端地址。

5. 反向代理动态api请求

Vue 应用站点还要充当一部分反向代理服务器的作用。

图片

假设真实后端 api 地址部署在10.200.200.157:8091地址上,api 请求以 /api 为前缀。

下面利用Url Rewrite Module 反向代理api请求到真实后端:

   点击站点功能视图---> Url重写---> 添加入站规则

图片

Url重写的结果其实就是下面的web.config文件

<?xml version="1.0" encoding="utf-8"?><configuration><!-- To customize the asp.net core module uncomment and edit the following section.   For more info see https://go.microsoft.com/fwlink/?linkid=838655 --><system.webServer><rewrite> <rules> <clear /> <rule name="ReverseProxyInboundRule" stopProcessing="true"> <match url="api/([_0-9a-z/-]+)" /><conditions logicalGrouping="MatchAll" trackAllCaptures="false" /><action type="Rewrite" url="http://10.200.200.157:8091/{R:0}" /> </rule> <rule name="ResourceToIndex" stopProcessing="true"><match url="(.*)" /><conditions logicalGrouping="MatchAll" trackAllCaptures="false"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/" /></rule></rules></rewrite><httpErrors><remove statusCode="404" subStatusCode="-1" /><remove statusCode="500" subStatusCode="-1" /><error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /><error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /></httpErrors> </system.webServer></configuration><!--ProjectGuid: 068855e8-9240-4f1a-910b-cf825794513b-->

注意:黄色背景行便是反向代理规则 ReverseProxyInboundRule, 注意反向代理规则要在静态资源规则 ResourceToIndex 的前面。

这样我们就完成了在前后端分离开发模式下,使用 IIS 托管 Vue 应用的全过程。  

参考:

IIS常见错误

Internet 信息服务 (IIS) 网页上的 HTTP 错误 500.19 - Internet Information Services | Microsoft Learn

在 IIS 中部署 SPA 应用,多么痛的领悟!

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

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

相关文章

Segment Anything Model(SAM)论文解读

一、引言 在这项工作中&#xff0c;作者的目标是建立一个图像分割的基础模型。也就是说&#xff0c;寻求开发一个提示模型&#xff0c;并使用一个能够实现强大泛化的任务在广泛的数据集上对其进行预训练。有了这个模型&#xff0c;使用即时工程解决新数据分布上的一系列下游分…

【rpc】Dubbo和Zookeeper结合使用,它们的作用与联系(通俗易懂,一文理解)

目录 Dubbo是什么&#xff1f; 把系统模块变成分布式&#xff0c;有哪些好处&#xff0c;本来能在一台机子上运行&#xff0c;为什么还要远程调用 Zookeeper是什么&#xff1f; 它们进行配合使用时&#xff0c;之间的关系 服务注册 服务发现 动态地址管理 Dubbo是…

Nacos docker实现nacos高可用集群项目

目录 Nacos是什么&#xff1f; Nacos在公司里的运用是什么&#xff1f; 使用docker构建nacos容器高可用集群 实验规划图&#xff1a;​编辑 1、拉取nacos镜像 2、创建docker网桥&#xff08;实现集群内的机器的互联互通&#xff08;所有的nacos和mysql&#xff09;&#x…

环境变量与Path环境变量

“环境变量”和“path环境变量”其实是两个东西&#xff0c;这一点大家一定要区分开&#xff0c;不要混为一谈。 “环境变量”是操作系统工作环境设置的一些选项或属性参数。每个环境变量由变量名和文件路径组成的&#xff0c;可以设置很多个环境变量。 我们一般使用环境变量…

冒泡排序、选择排序、插入排序、希尔排序

冒泡排序 基本思想 代码实现 # 冒泡排序 def bubble_sort(arr):length len(arr) - 1for i in range(length):flag Truefor j in range(length - i):if arr[j] > arr[j 1]:temp arr[j]arr[j] arr[j 1]arr[j 1] tempflag Falseprint(f第{i 1}趟的排序结果为&#…

人生中第一次向开源项目提交PR记录

git了解很久了&#xff0c;但是就是没有向大一点的项目提交过pr&#xff0c;都是自己瞎折腾&#xff0c;记录一下开源项目提交PR过程&#xff0c;省略的过程可以参考&#xff1a; https://www.runoob.com/git/git-tutorial.html&#xff0c;这个里面包括安装&#xff0c;使用&a…

正规好用的电脑端抽奖软件有哪些?

这几个软件都是本人反复用过、反复比较的&#xff0c;且都超过5年。 1. 518抽奖软件 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽…

如何进行错误处理和异常处理?

错误处理和异常处理是编程中非常重要的概念&#xff0c;它们允许我们在程序运行时处理各种问题和异常情况&#xff0c;以确保程序的稳定性和可靠性。在C语言中&#xff0c;错误处理和异常处理通常通过条件语句和函数来实现。本文将详细讨论C语言中的错误处理和异常处理的方法&a…

项目系列之登录管理

登录管理是现代计算机系统中关键的组成部分之一。那么本篇博客我们来简单了解一下登录的流程与前后端干了啥事。 一.登录流程&#xff1a; 用户打开登录页面&#xff1a; 用户访问应用程序或网站的登录页面。此页面通常包含用户名/邮箱输入字段和密码输入字段&#xff0c;以及…

测试平台部署三——Nginx

测试平台部署——Nginx 一、nginx部署1、nginx的作用:2、案例1二、django静态文件配置和部署1、nginx工作原理2、反向代理一、nginx部署 1、nginx的作用: 静态文件服务器和反向代理django服务 进入nginx容器中 sudo docker run --rm -it nginx:alpine /bin/sh

什么是动态组件以及使用场景

文章目录 一、vue中的动态组件是什么&#xff1f;有什么用&#xff1f;二、使用demo1.tab页签中的使用2.模拟新闻页demo 三、用keep-alive包裹&#xff0c;保持状态总结 一、vue中的动态组件是什么&#xff1f;有什么用&#xff1f; 动态组件指可以动态切换组件的显示和隐藏。…

岩土工程安全监测利器:振弦采集仪的发展

岩土工程安全监测利器&#xff1a;振弦采集仪的发展 岩土工程安全监测是保障建筑物、地下工程和地质环境安全稳定运行的重要手段。传统上&#xff0c;监测手段主要依靠人工巡视以及基础设施安装的传感器&#xff0c;但是这些方法都存在着缺陷。人工巡视存在的问题是数据采集精…

【Vue】详细介绍Vue项目的目录结构及各个核心文件的示例代码

Vue.js并没有严格的文件和目录结构要求&#xff0c;但一般情况下&#xff0c;我们的Vue项目目录结构如下&#xff1a; ├── node_modules/ # 项目依赖的 node 模块 ├── public/ # 公共资源目录 │ ├── favicon.ico # 网页图标 │ └──…

Linux驱动【day2】

mychrdev.c: #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include<linux/uaccess.h> #include<linux/io.h> #include"head.h" unsigned int major; // 保存主设备号 char kbuf[128]{0}; unsigned int…

第24节-PhotoShop基础课程-钢笔工具

文章目录 前言1.钢笔工具1.直线绘制2.曲线绘制 按住shift键 垂直/水平/453.添加&#xff0c;减少锚点&#xff08;在路径上点击锚点就可以增加和删除&#xff09;4.移动锚点 Ctrl 左键5.手柄控制 先按住Alt 点击 一个锚点有两个手柄控制点&#xff08;中间点&#xff09;6.加…

【linux基础(五)】Linux中的开发工具(上)---yum和vim

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到开通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux中的开发工具 1. 前言2.…

4、Nginx 配置实例-反向代理

文章目录 4、nginx 配置实例-反向代理4.1 反向代理实例一4.1.1 实验代码 4.3 反向代理实例二4.3.1 实验代码 【尚硅谷】尚硅谷Nginx教程由浅入深 志不强者智不达&#xff1b;言不信者行不果。 4、nginx 配置实例-反向代理 4.1 反向代理实例一 实现效果&#xff1a;使用 nginx…

窗口函数-分组排序:row_number()、rank() 、dense_rank()、ntile()

窗口函数语法结构&#xff1a; 分析函数() over(partition by 分组列名 order by 排序列名 rows between 开始位置 and 结束位置) 开窗函数和聚合函数区别&#xff1a; 聚合函数会对一组值进行计算并返回一个值&#xff0c;常见的比如sum()&#xff0c;count()&#xff0c;ma…

动态代理JDK与cglib的区别之:如何处理被代理方法中的This调用

关于JDK与cglib动态代理的使用不是本文关注的重点&#xff0c;如有不清楚的同学可以查询相关资料进行了解。本文主要是要讲一下在面对方法存在嵌套调用时JDK与cglib动态代理的区别以及原因。 先看下测试代码&#xff0c;注意下TestProxyJDKImpl的test1方法调用了test2方法即可…

Python入门学习13(面向对象)

一、类的定义和使用 类的使用语法&#xff1a; 创建类对象的语法&#xff1a; ​​​​​​​ class Student:name None #学生的名字age None #学生的年龄def say_hi(self):print(f"Hi大家好&#xff0c;我是{self.name}")stu Student() stu.name &q…