使用express或koa或nginx部署history路由模式的单页面应用

news2024/9/20 21:52:36

使用hash模式会有#,影响美观,所以使用history模式会是个更好的选择。

前端项目打包上线部署,可以使用下面的方式部署history模式的项目,下面以 jyH5 为例

expressjs部署

express脚手架搭建的app.js中添加如下代码:

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  const path = "/jyH5/";
  if (req.url.indexOf(path) !== -1) {//请求url包含 /jyH5/ 路径
    res.sendFile(__dirname + "/public" + path + "index.html"); // 返回 index.html 文件;
  }else{
    next(createError(404));
  }
});
app.use(express.static('public'))//暴露public文件夹下的所有文件

打包后的文件放在 /public/jyH5/ 这个文件夹下,目录结构如下图:

koa2部署

koa2脚手架搭建的app.js中添加如下代码:

const fs = require("fs");
app.use(async (ctx, next) => { //使用 history 路由中间件,需要放在koa-static前执行
  const path = "/jyH5/"; // 项目部署的路径
  await next(); // 等待请求执行完毕
  console.log(ctx.request.url, ctx.response.status);
  if (ctx.response.status === 404 && ctx.request.url.includes(path)) {
    // 判断是否符合条件
    ctx.type = "text/html; charset=utf-8"; // 修改响应类型
    ctx.body = fs.readFileSync(__dirname + "/public" + path + "index.html"); // 修改响应体
  }
});

app.use(require('koa-static')(__dirname + '/public'))

打包后的文件放在 /public/jyH5/ 这个文件夹下,目录结构如下图:

nginx部署

nginx.conf文件中添加如下代码:

http {
    #...其他配置

    server {
        listen       8080;
        server_name  localhost;
        # server_name  domain2.com www.domain2.com;
        
        # history路由模式需要下面的配置
        location / { #部署在根目录下
            index index.html index.htm;
            proxy_set_header Host $host;
            # history模式最重要就是这里
            try_files $uri $uri/ /index.html;
            # index.html文件设置协商缓存即可
            add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
        }
        location /jyH5 { #部署在根目录/jyH5文件夹下
            index /jyH5/index.html;
            proxy_set_header Host $host;
            # history模式最重要就是这里
            try_files $uri $uri/ /jyH5/index.html;#依次匹配try_files后面的所有地址,都没匹配上时使用最后一个地址
            # index.html文件设置协商缓存即可
            add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
        }
    }
}

上面是两套配置,一套是部署在根目录下,一套是部署在jyH5目录下,根据自己需要配置。打包后的文件目录结构如下图:

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

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

相关文章

大模型团队招人(校招):阿里巴巴智能信息,2025届春招来了!

阿里巴巴智能信息,2025届春招开始啦,欢迎有意向的优秀同学扫码投递。实习的内容也是大语言模型的核心方向Alignment,在这里有丰富的实验资源、良好的数据支持、优秀的师兄师姐带领你进入大模型的全新领域。内推直达:https://talen…

【Python】探索 Blinker:Python 进程内信号/事件分发系统

没人疼就去健身 ,练完浑身疼! 在现代软件开发中,事件驱动编程是一种非常强大的模式,它允许系统组件之间进行松散耦合的通信。Blinker 是一个 Python 库,提供了一个快速的进程内信号/事件分发系统,使得事件…

Double-Fetch漏洞检测工具的部署、使用与原理分析

文章目录 前言1、概述1.1、简介1.2、工作原理1.2.1、内核空间与用户空间的信息传递1.2.2、Double-Fetch漏洞产生的原因1.2.3、产生Double-Fetch漏洞的情况1.2.4、一个Double-Fetch漏洞示例1.2.5、Double-Fetch漏洞检测工具原理 1.3、模式匹配原理分析1.3.1、Coccinelle介绍1.3.…

AN7563PT数据手册学习笔记1

AN7563PT AN7563PT1 Overview2 Feature3 Block Diagram AN7563PT 1 Overview AN7563PT是一款高度集成的单芯片解决方案,适用于以太网网关应用。集成4个千兆以太网物理层、1个DDR4/DDR3控制器、1个USB3.0主机接口、1个USB2.0主机接口、2个PCIe Gen2单通道、1个VoIP…

什么是损失函数?常见的损失函数有哪些?

损失函数 什么是损失函数?损失函数作用如何设计损失函数常见的损失函数有哪些? 什么是损失函数? 损失函数(Loss Function),也称为误差函数,是机器学习和深度学习中的一个重要概念。它用于衡量模…

光伏设计软件的基本功能

一、屋顶绘制 光伏设计软件的首要功能是屋顶绘制。通过直观易用的界面,可以轻松绘制出建筑物的屋顶轮廓、结构细节等基本信息。软件支持多种屋顶类型的绘制,并允许用户自定义屋顶尺寸和形状。 二、参照物、障碍物放置 在光伏系统设计中,参照…

2024考研数学真题解析-数二:

第一类间断点:可去间断点,跳跃间断点。 幂指函数x的取值范围是x>0。 接着分母不能为0推出x1,x2是间断点,由幂指函数x>0可知,x0也是间断点。 先求x0处的极限,这里没有必要求0左右两边的极限&#xff0…

如何下载旧版本app或者旧版本的电脑软件?下载旧版本手机app和电脑软件的方法

下载旧版本软件的方法介绍,下面以下载旧版本剪映为例:

Java标识符、关键字和保留字

Java中的标识符、关键字和保留字 标识符概念标识符命名规则(必须遵守)标识符命名规范(更加专业)关键字保留字 标识符概念 1.Java对各种变量、方法和类等命名时使用的字符序列称为标识符。 2.凡是自己可以起名字的地方都叫标识符 …

鸿蒙生态应用

鸿蒙生态应用开发核心概念 HarmonyOS 应用:使用 HarmonyOS SDK 开发的应用程序,能够在华为终端设备 (如:手机、平板等)上运行,其有两种形态: ⚫ 传统方式的需要安装的 App。 ⚫ 轻量级&#xf…

ABAP 一步一步教你添加ALV界面菜单功能按钮

ABAP 一步一步教你添加菜单功能按钮。 程序里面找到这个组件小按钮 就可以看到GUI状态了。 在修改GUI STATUS 是如果要添加一个功能按钮,必须先创建一个功能键(具体参照下方),之后再在应用程序工具栏输入该功能键的功能码否则报…

(c++)线程的创建、互斥锁的使用、线程数组

1.创建10个线程,每个线程都做10万次全局变量num1操作,然后输出这个全局变量,预想结果应该是100万。但是线程可能在cpu分配的一个时间片中做不完10万次1的操作,这时候cpu会被其他线程抢占,由于num1不是一个原子操作&…

MySQL的缓存策略

目录 一、MySQL 缓存方案用来干什么 二、提升MySQL访问性能的方式 1、读写分离(MySQL的主从复制) 2、连接池 3、异步连接 三、缓存方案是怎么解决的 1、缓存与MySQL一致性状态分析 2、制定热点数据的读写策略 四、缓存方案问题的解决方法 1、缓…

Python画笔案例-055 绘制七彩浪花

1、绘制七彩浪花 通过 python 的turtle 库绘制 七彩浪花,如下图: 2、实现代码 绘制七彩浪花,以下为实现代码: """七彩浪花.py """ import turtlecs [red,orange,yellow,green,cyan,blue,magenta]…

网络流之最大流(EK 模板)

EK的时间复杂度是O( )。 EK 算法 和 dinic 算法的区别是 :EK是通过 bfs 找到一条增广流,然后累加,循环此步骤直到 bfs 找不到增广流;而 dinic 算法 是通过 bfs 分层找到一条增广流,然后通过 dfs 跑完 当前分层图中所…

Redis基本命令详解

1. 基本命令 命令不区分大小写,而key是区分大小写的 # select 数据库间的切换 数据库共计16个 127.0.0.1:6379> select 1# dbsize 返回当前数据库的 key 的数量 127.0.0.1:6379[1]> dbsize# keys * 查看数据库所有的key 127.0.0.1:6379[1]> keys *# fl…

[Spring]Spring MVC 请求和响应及用到的注解

文章目录 一. Maven二. SpringBoot三. Spring MVC四. MVC注解1. RequestMapping2. RequestParam3. PathVariable4. RequestPart5. CookieValue6. SessionAttribute7. RequestHeader8. RestController9. ResponseBody 五. 请求六. 响应 一. Maven Maven是⼀个项⽬管理⼯具。基于…

qwen2.5 vllm推理;openai function call调用中文离线agents使用

参考: https://qwenlm.github.io/zh/blog/qwen2.5/ https://qwen.readthedocs.io/zh-cn/latest/framework/function_call.html#vllm 安装: pip install -U vllm -i https://pypi.tuna.tsinghua.edu.cn/simplevllm-0.6.1.post2 运行:</

预测合理交易目标:中断形态趋势分析

日常交易时&#xff0c;我们除了通过判断一些重要指标来预测趋势走向之外&#xff0c;观察趋势的形态变化也是我们技术分析中很重要的分析方式。而识别并理解这些形态可以为交易者提供进出场的关键信号。今天我们就来说说其中一种形态——中断形态&#xff01; 中继形态在市场…

使用 Python 高分解决 reCAPTCHA v3 的指南

reCAPTCHA v3 是自动化系统面临的最具挑战性的障碍之一。随着越来越多的网站实施高级 CAPTCHA 系统来抵御机器人&#xff0c;在 reCAPTCHA v3 中获得高分对于成功的自动化至关重要。本指南将引导您了解有效的策略和 Python 技术&#xff0c;以高分解决 reCAPTCHA v3&#xff0c…