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)是最简单和最通用的排序方法,其基本思想是&…

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

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

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

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

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

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

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

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

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

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

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

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

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

向日葵IT运维节丨解决三个关键问题,搞好企业IT运维

724运维节,是所有运维人的节日,贝锐向日葵也在这一天致敬所有需要7x24小时待命的运维人,将这一天定为“向日葵IT运维节”,为广大运维人带来大量专属福利! 724这组数字,折射出运维人的日常,即7x2…

c++多态的定义和原理

目录 1、多态的定义和实现 1.多态的构成条件 2.虚函数 3.虚函数的重写(覆盖) 4.虚函数重写的两个例外 5.c11 override和final 6.重载,覆盖(重写)和隐藏(重定义) 2、抽象类 概念 接口继承和实现继承 3、多态的原理 1.虚函数表 2.多态的原理 4、多继承中的虚…

MessageBox与HubSpot:企业沟通与客户管理的双重利器

今天咱们来聊聊两个超实用的工具——MessageBox和HubSpot。它们就像是你的超级助手,让你和客户沟通起来更顺畅,管理起来也更轻松。 先说说MessageBox吧 想象一下,你正在忙着工作,突然客户发来个消息,你嗖的一下就收到…

常见网页问题解决

用edge浏览器打印功能时,出现瞬间或加载几秒后突然闪退情况,本来以为是浏览器出了问题,去重置设置也没有,后来又下载了Chrome浏览器,没想到还是一样!!!!!想着…

windows安装Docker Desktop及国内镜像

简介 Docker 是一个开源的应用容器引擎,它让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。通过Docker工具,简化了应用的部署、配置和管理过程,提高…

2024年五款企业加密软件(企业加密软件排行最新)

关键是数字化时代,企业数据安全至关重要。一般来说信息技术快速发展,企业数据泄露风险上升。你知道的加密软件保护企业核心数据和商业机密,不可或缺。对我而言介绍几款企业加密软件,帮助选择适合需求的解决方案。 固信加密软件ht…