首页 > 系统相关 >windows server + iis 部署若伊前端vue项目

windows server + iis 部署若伊前端vue项目

时间:2024-07-05 19:32:41浏览次数:17  
标签:插件 vue iis 若伊 windows nginx 重写

一、背景说明

工作原因,一直使用若伊前后端分离版框架进行二次开发。客户的服务器多数为windows server系统,少部分为linux系统。过去一直是使用nginx进行前端的部署,nginx的代理功能确实强大,但是在windows系统上发现一些小问题。前阵子机缘巧合之下发现了Windows server操作系统自带的iis服务,便尝试使用iis发布web服务。简单测试暂未发现问题。网上找了找,没有发现完整的指引,只在csdn看到一个说明,但是要订阅专栏才能看全文,恶心!

二、windows下使用nginx代理发现的问题

很多客户都是要求将系统部署到他们自己的内网服务器上,偶尔会手动关闭服务器。为了减少现场支持、远程支持的次数,降低成本,就要求前端服务具备服务器开机自启的功能。

1,开机自启:一直没有找到直接将nginx注册为windows服务的方法,只能通过第三方软件实现(名字忘了叫啥了);

2,重复启动:最头疼的问题其实是这个,客户自己的运维人员,有的时候会自己操作,再启动一次或者多次nginx,导致后台实际上有多个nginx同时在运行,这种情况下只能通过任务管理器关闭nginx进程。

三、部署环境

服务器操作系统版本:Windows Server 2022 Standard 21H2

若伊版本:3.8.8

四、部署步骤概要

1,安装iis服务(无需外网)

2,下载路由插件和重写插件(需要外网)

3,安装路由插件和重写插件

4,若伊vue项目调整并打包

5,配置网站

6,配置url重写规则

五、部署

1,安装iis服务(无需外网)

打开windows server 自带的服务器管理器,打开添加角色和功能->下一步->下一步->选中web服务器(IIS)... 反正只需要选中iis服务,按着提示一直下一步安装就可以了。这个过程不需要连接互联网也不需要重启。

安装完成后,在windows管理工具下面会有Internet Information Services(IIS)

2,下载并安装路由插件和重写插件(需要外网)

把这俩玩意下载下来,双击安装就好(链接我回头找一下,会发出来)

3,若伊vue项目调整并打包

打包之前,需要先调整一下路由的模式,history改为hash

4,配置网站

打开iis,左边选中网站,右边点击“添加网站...”(“网站”展开后有一个默认的网站,可以先删了)

设置网站名称(随便写)、物理路径(前端打包后的dist文件夹,选到index.html所在文件夹)、ip地址、端口

点击确定,此时应该能够进入到若伊的登录也,上面的路径有#,此时获取不到验证码(我的已经调完了,所以有验证码)

 

5,配置url重写规则(重写后端请求)

注:如果没有Application Request Routing Cache和URL重写,则是第二部的那两个插件没装上

打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能

点击 网站下面刚刚创建的ruoyi-web,点击URL重写,点击打开功能

点击添加规则

选择空白规则,点确定

设置

名称:若伊后端(随便写)

请求的URL:与模式匹配

使用:通配符

模式:prod-api/*

操作类型:重写

重写URL:http://10.10.0.18:8080/{R:1}

设置完就大功告成了!

标签:插件,vue,iis,若伊,windows,nginx,重写
From: https://www.cnblogs.com/blackey/p/18286474

相关文章

  • Vue 快速入门案例
    步骤一:引入vue.js文件添加<script>标签并标明路径步骤二:定义Vue对象el    Vue接管区域data    定义数据模型步骤三:编写视图层的展示v-model    绑定数据模型{{要展示的数据模型}}运行效果总结文本框里的值(左hello)修改,展示的值(右hel......
  • Vue-cli
    环境准备nodejs安装验证nodejs环境变量配置npm的全局安装路径切换npm的淘宝镜像安装Vue-clinode-v//验证是否安装成功安装成功会显示版本回头再写...验证是否安装成功vue--version安装成功会显示版本  创建Vue项目vueui点击创建 可以看到进......
  • 初学vue3, 全是黑盒子,vue3知识点汇总
    学习Vue.js应该像学习一门编程语言一样,首先要熟练掌握常用的知识,而对于不常用的内容可以简单了解一下。先对整个框架和语言有一个大致的轮廓,然后再逐步补充细节。千万不要像学习算法那样,一开始就钻牛角尖。前序:vueAPI的风格分为:选项式和组合式,vue2中一般用选项式,所......
  • Vue 与 scoped
    在Vue中,scoped是一个用于<style>标签的特殊属性,它的作用是将样式限定在当前组件的范围内,避免样式污染其他组件。这对于大型项目尤其有用,因为它可以确保组件的样式是独立的,不会意外地影响到其他组件。使用scoped在Vue组件中,你可以通过在<style>标签上添加scoped属性......
  • Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出,鼠标滑上不显示tooltip,溢出显示to
    <templateslot="testContent"slot-scope="{record}"><a-tooltip@mouseenter="showToolTip"overlayClassName="customtooltip_class"......
  • VUE0002:pnpm无法加载,解除系统禁止运行脚本
    1,pnpm:无法加载文件C:\Users\xxxxx\AppData\Roaming\npm\pnpm.ps1,因为在此系统上禁止运行脚本。2,解决方案地址:https://blog.csdn.net/jwbabc/article/details/139505236vscode中执行pnpminstall的时候,直接报了上面的错误。解决: 然后输入:set-ExecutionPolicyRemoteSign......
  • Leaflet-vue 热力图 (设置热力图颜色)
    使用的热力图是heatmap.js因为是Leaflet,所以还要引入一个对应的插件leaflet-heatmap.js,这个插件就在heatmap目录下的plugins里面。代码如下:import"heatmap.js";importHeatmapOverlayfrom"@/utils/leaflet-heatmap.js";letcfg={radius:0.5,//半径maxOpacity......
  • vue3 父子组件双向绑定
    父组件ParentComponent.vue<!--ParentComponent.vue--><template><div>子组件输入的数据<p>ParentValue:{{parentValue}}</p>父输入框<inputv-model="parentValue"><CustomInputv-model="par......
  • vue-router
    vue-routervue-router是vue的一个插件库,专门用来实现SPA单页面应用对路由的理解1.什么是路由一个路由就是一组映射关系(key-value)key是路径,value可以是function或components2.路由的分类后端路由理解:value是function,用于处理客户端提交的请求工作过程:服务......
  • Vue中引入jQuery两种方式可在vue中引入jQuery
    第一种:普通html中使用jquery将jQuer的文件导入到项目中,然后直接使用<scriptsrc="jQuery.js"></script>即可。第二种:vue组件中使用jquery1、安装依赖cnpminstalljquery--save或者npminstalljquery--save;2、此处也有两种方式一、组件中直接使用jquery二、使用全局变量......