IIS部署vue项目 IIS重写URL

news/2024/9/23 10:25:23/

【第一步】安装IIS

{1)打开控制面板 -> 打开程序和功能 -> 打开启用或关闭windows功能 

 (2)找到 Internet Information Services 勾选【web管理工具】和【万维网服务】,然后 确定

【第二步】安装URL重写模块

1). 安装URL Rewrite,下载地址
2). 安装 Application Request Routing,下载地址

下载后安装,安装完成抈IIS管理器会多出两个模块

【第三步】部署用vue项目做的web站点

(1) 将vue项目构建之后的dist文件夹里的全部文件copy到服务器上,

(2)新建一个iis站点,设置URL Rewrite规则

 (3)添加规则

 (4)填写规则正式表达式

注 :
1, 使用 : 正则表达式
2, 模式代码: ^((?!(api)).)*$
3, 添加两个条件::不是目录, 不是文件
4, 操作属性::/index.html
5, 点击右上角的应用

  

注 : 为什么要URL Rewrite ?
1, 因为VUE页面驱动是靠项目内的路由跳转,要保证每次页面都在根目录下的 /index.html。
2, 若是此处不添加规则,访问网站首页可以,但你刷新后或跳转页面就会出现 404 错误。

 (5)部署完成

打开网站即可看到可以正常浏览网站,以及可以访问到后台接口.
如若有多个后台接口,就在服务器主页添加重写URL规则即可.

1, 主要难点在配置反向代理,即 Application Request Routing和 URL Rewrite
2, 成功配置一次即可理解使用方式. 相当于配置vite.config.js的代理.
3, 要把项目需要的代理都正确添加上
4, 注意,会在vue站点的根目录里面生成一个web.config的配置文件,发布更新要保留这个配置文件,不然又要重新配置一次。

(6)web.config 配置文件内容

复制代码

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><rewrite><rules><rule name="index"><match url="^((?!(api)).)*$" /><conditions><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/index.html" /></rule></rules></rewrite></system.webServer>
</configuration>

复制代码


http://www.ppmy.cn/news/1459293.html

相关文章

【Web前端】jquery_json

1.jquery 1.1jquery简介 jquery是一个快速、简洁的javascript框架&#xff0c;于2006年1月份发布。jquery设计的宗旨是"write less,domore"&#xff0c;倡导写更少的代码&#xff0c;做更多的事情。封装了javascript常用的一些功能代码&#xff0c;提供一种简便的j…

软件应用开发安全设计指南

1.1 应用系统架构安全设计要求 设计时要充分考虑到系统架构的稳固性、可维护性和可扩展性&#xff0c;以确保系统在面对各种安全威胁时能够稳定运行。 在设计系统架构时&#xff0c;要充分考虑各种安全威胁&#xff0c;如DDoS攻击、SQL注入、跨站脚本攻击&#xff08;XSS&…

【编程向导】Docker-常用命令

常用命令 管理命令 管理命令说明builder管理构建config管理配置container管理容器context管理上下文engine管理引擎image管理镜像network管理网络node管理 Swarm 节点plugin管理插件secret管理 Docker secretsservice管理服务stack管理 Docker stacksswarm管理 Swarm 集群sys…

我的创作纪念日1460天(4年)

机缘 作为一名技术爱好者&#xff0c;我最初成为创作者的初心源于对知识的渴望和对分享的热情。在参与多个实战项目的过程中&#xff0c;我积累了丰富的经验&#xff0c;这些经验不仅仅是代码和解决方案&#xff0c;更多的是对问题本质的理解和解决问题的思维方式。我意识到&a…

爬虫-无限debug场景 解决方式

解决无限debug 场景1 1. 鼠标右键 选择 continue to here&#xff08;此处不停留&#xff09;2. 鼠标右键 选择 edite breakpoint 设置 10 保证条件不成立 这行永远不执行3.方法置空 1. 方法调用加断点2. 控制台 setInterval function name() {}4. 替换文件 5. hoo…

Java入门基础学习笔记13——数据类型

数据类型的分类&#xff1a; 基本数据类型 引用数据类型 基本数据类型&#xff1a;4大类8种类型&#xff1a; 定义整形用int&#xff0c;再大的数用long。 package cn.ensource.variable;public class VariableDemo2 {public static void main(String[] args) {//目标&#x…

虚幻引擎中的投影技术主要用于创建多屏交互式内容和沉浸式显示环境

首先&#xff0c;在虚幻引擎&#xff08;UE4&#xff09;中&#xff0c;nDisplay插件是一个强大的工具&#xff0c;它允许开发者创建多屏投影系统。这种系统可以是由多个相邻的物理屏幕组成&#xff0c;例如Powerwall显示器&#xff0c;或者使用多个投影仪将3D环境投射到物理表…

优立科技:从数字孪生到元宇宙

2021年10月&#xff0c;Facebook致力于发展元宇宙&#xff0c;并更名为Meta。加上此前Roblox上市的消息&#xff0c;让「元宇宙」一词迅速在2021年爆火&#xff0c;刺激了VR、游戏等相关产业的发展&#xff0c;甚至有人宣称2021年为「元宇宙『元年』」。然而&#xff0c;「元年…