vue-router history 模式下将所有资源文件js/css/img都存放在oss 利用 cdn 访问整体思路汇总

背景

我们有一个域名https://example.com,但是ssl证书很贵,搞子域名来承接新站点有点费钱,所以我们想用一个目录https://example.com/admin/ 来作为管理后台的站点,这个站点是单页面应用,我又想让其用history router的方式作为路由结构,不然看着一堆#怪怪的

history 下增加路由前缀/admin

将cdn的前缀打包到每个js分片引入的前缀里

这样index.html中引入的js和css都是相对于cdn的路径,就不会再与自己的域名有关,这样也就不用去自己服务器请求js了,js到了本地就可以运行起来,这样只需要发布index.html这一个文件即可,其他都会去资源文件上请求

 按照路由前缀/admin 配置nginx 所有路由请求都一直返回index.html

nginx部署vue-router history 模式时报 404 nginx try_files 文件路径详解和 vue.config.js中publicPath的作用_tryfiles vue-CSDN博客文章浏览阅读1.1k次,点赞3次,收藏4次。try_files 的路径解析:在 try_files 指令中,文件路径可以是相对路径(相对于 root 或 alias 指定的路径)或绝对路径(相对于服务器根目录)。当路径以斜杠 / 开头时,被视为绝对路径。否则,会相对于 root 或 alias 的路径进行解析。_tryfiles vuehttps://blog.csdn.net/wangsenling/article/details/132592905

再把dist/*下的资源文件全部上传到oss的对应路径下,记得放在具体版本号文件夹下,方便未来清理


Path 在这里表示文件上传到 OSS(对象存储服务)后的自定义路径。代码中的逻辑是将本地 dist 目录中的文件上传到 OSS 并按照特定路径进行组织。具体来说,这段代码会将文件路径中的 dist 目录去掉,然后替换路径中的反斜杠(\)为正斜杠(/)。让我们逐步解析这段代码:filePath.lastIndexOf("dist"):找到文件路径中最后一次出现 dist 的位置。
filePath.substring(index + 4, filePath.length):从 dist 之后的位置开始截取到文件路径的末尾。这里的 index + 4 是因为 dist 这个字符串的长度是 4。
Path.replace(/\\/g, "/"):将路径中的反斜杠替换为正斜杠。
例如,如果 filePath 是 C:\project\dist\js\app.js,那么:index 是 11,因为 dist 出现在第 11 个位置。
filePath.substring(15, filePath.length) 会得到 \js\app.js。
Path.replace(/\\/g, "/") 会将 \js\app.js 转换为 /js/app.js。
最终返回的 Path 是 /js/app.js,这就是文件在 OSS 上的路径。简而言之,Path 是去掉本地 dist 目录后、并将反斜杠替换为正斜杠后的相对路径。

访问 https://example.com/admin/ 就可以访问到你想要的静态站点了,非常nice,看似简单,实则一点也不容易,哈哈!对于纯前端还是纯后端,上面这个过程都够搞半天的,这里就公开分享给大家了!

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

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

相关文章

Redis基础教程(十六):Redis Stream

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

Qt常用基础控件总结—带边框的部件(QFrame和QLabel)

带边框的部件 框架控件QFrame类 QFrame类介绍 QFrame 类是带有边框的部件的基类,带边框部件的特点是有一个明显的边框,QFrame类就是用来实现边框的不同效果的(把这种效果称为边框样式),所有继承自 QFrame 的子类都可以使用 QFrame 类实现的效果。 部件通常是矩形的(其他…

谷粒商城学习笔记-18-快速开发-配置测试微服务基本CRUD功能

文章目录 一,product模块整合mybatis-plus1,引入依赖2,product启动类指定mapper所在包3,在配置文件配置数据库连接信息4,在配置文件中配置mapper.xml映射文件信息 二,单元测试1,编写测试代码&am…

凯中精密:下一个正丹吗?

业绩预增超十倍! 又一匹A股业绩黑马诞生——凯中精密 近期,凯中精密发布2024年上半年业绩预告,预计净利润增速高达1068%至1402%。 从23年的209.54%到24年Q1惊人的6885.78%,再到24年上半年的十倍增速,这条业绩黑马利润…

【python算法学习2】冒泡排序的写法

目的:学习冒泡排序的写法 1 定义 1.1百度百科 冒泡排序_百度百科在程序设计语言中,排序算法主要有冒泡排序、快速排序、选择排序以及计数排序等。冒泡排序(Bubble Sort)是最简单和最通用的排序方法,其基本思想是&…

C# 中,使用 LINQ 示例 备忘

语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称。 数据查询历来都表示为简单的字符串,没有编译时类型检查或 IntelliSense 支持。 此外, … 对于编写查询的开发者来说,LINQ 最明显的“语言集成”部分就是查询表达式。 …

Elasticsearch基础教程

目录 引言Elasticsearch的特点 分布式架构实时搜索和分析强大的全文搜索RESTful接口高可用性和容错性 Elasticsearch的核心概念 索引文档分片和副本节点和集群 Elasticsearch的使用场景 日志和事件数据分析全文搜索实时数据处理数据可视化 安装和配置Elasticsearch的优化 性能…

设计模式 - 最简单最有趣的方式讲述

别名《我替你看Head First设计模式》 本文以故事的形式带你从0了解设计模式,在其中你仅仅是一名刚入职的实习生,在项目中摸爬滚打。(以没有一行真正代码的形式,让你无压力趣味学习) 设计模式 策略模式观察者模式装饰者…

技术难点思考SpringBoot如何集成Jmeter开发

技术难点思考SpringBoot如何集成Jmeter开发 需求概述 构建一个高性能的压测平台,该平台需通过Spring Boot框架调用JMeter进行自动化压力测试。 解决方案一:使用Runtime类调用外部进程 技术概述 Java的Runtime类提供了与操作系统交互的接口&#xff0…

springboot仪器校准系统-计算机毕业设计源码51504

摘 要 随着科技的不断发展。测量设备的准确性和可靠性对于各行各业都至关重要。仪器校准系统作为确保测量设备性能的重要手段,已成为工业生产、科学研究、质量控制等领域不可或缺的一部分。本文对仪器校准系统进行了概述,探讨了校准方法、流程、特点、应…

Apache防盗链、网页压缩、网页缓存

目录 网页压缩 类型 示例 动态添加模块操作步骤 重装Apache操作步骤 网页缓存 示例 操作步骤 隐藏版本信息 操作步骤 Apache防盗链 定义 原理 配置防盗链实验环境 实验环境 本地图片盗链示例 操作步骤 防盗链示例 操作步骤 网页压缩 网站的访问速度是由多个…

following a different leader because i am not the healthiest node

源代码 解决方案: 手动 patronictl failover 修改切换模式从高可靠模式改成高可用模式 patronictl edit-config-synchronous_mode: true synchronous_mode: false

2024.7.10 刷题总结

2024.7.10 **每日一题** 2970.统计移除递增子数组的数目 Ⅰ,这道题是一个考察双指针的题目,也考察了数组的基本性质。题目的意思是要统计有多少个子数组能满足移除后剩下的元素为严格递增的关系,刚开始没考虑到移除的元素要是连续的&#xff…

透明加密软件哪个好?这5款好用的加密软件尽在你眼前!

数据安全和隐私保护已成为企业和个人不可忽视的重要问题。 透明加密技术以其无需用户额外操作即可实现文件的加密和解密,大大提高了数据处理的便捷性和安全性。 下面小编将为您介绍五款优质的透明加密软件,帮助您选择最适合自己的加密工具。 1. Pg32 …

C语言 比较两个字符串

编一个程序,将两个字符串s1和s2比较,若s1>s2,输出一个正数;若s1s2,输出0;若s1<s2,输出一个负数。不要用strcpy函数。两个字符串用gets函数读入。输出的正数或负数的绝对值应是相比较的两个字符串相应字符的ASCII码的差值。例如:“A”与“C”相比,由于“A”<“C”,应输…

超秒集物商城打造“私域流量新策略”用消费增值破解流量困局

消费增值模式是什么?在如今这个公域流量的竞争愈发激烈的时代,流量已成为企业竞争的关键,消费增值可以帮助企业在私域流量的海洋中乘风破浪? 一、消费增值模式的引入 消费增值模式不仅仅是一种商业模式,更是一种营销策略。它鼓励消费者在享受商品或服务的同时,通过消费行为获…

KEIL5 MDK的(官网)下载安装(Win11)

一、KEIL5 MDK下载 1、Keil官网下载&#xff1a;Keil Product Downloadshttps://www.keil.com/download/product/ 支持包和破解软件和V5编译器下载链接 链接&#xff1a;https://pan.baidu.com/s/1ery0Q3FAR8_bLLlPQHSFNg?pwd9pxf 提取码&#xff1a;9pxf 选择最新版本下载&…

打造高效能“园区企业服务平台”,让企业更好更快发展!

​近年来&#xff0c;随着我国经济的快速发展&#xff0c;各地产业园区建设如火如荼&#xff0c;成为区域经济的支柱&#xff0c;如果说园区是区域经济的支柱&#xff0c;企业则是园区的血液&#xff0c;给园区带来生命力&#xff0c;为园区发展提供着动力&#xff0c;各地政府…

linux从入门到精通

文章目录 一.Linux 基础知识1. Linux 操作系统简介2. Linux 的基本组成3. Linux 的优势和应用领域4. 学习 Linux 的路径和资源5. Linux 的未来展望 二.Linux 命令1.linux目录结构2.linux文件基本属性2.1 Linux 文件的基本属性2.2 Linux 文件类型2.3 Linux 文件权限2.4 文件属性…

electron + express 实现 vue 项目客户端部署

写在前面 作为一个前端程序员&#xff0c;如何实现从前端到客户端的跨越&#xff0c;可能是一个很难实现的事。但客户需求千奇百怪&#xff0c;偶尔遇到一个非要客户端的&#xff0c;如何应对&#xff1f; 那Electron可能真是你福音。具体它有哪些功能&#xff0c;可自行官网…