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

news2024/9/17 8:56:03

背景

我们有一个域名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.coloradmin.cn/o/1918736.html

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

相关文章

C++入门到进阶(图文详解,持续更新中)

C入门到进阶(图文详解,持续更新中) 目录 C入门到进阶(图文详解,持续更新中) 数据 数据类型 基本数据类型/内置数据类型 C常用运算符 赋值运算符 关系运算符 逻辑运算符 杂项运算符 数据的本地化…

VBA即用型代码手册:删除完全空白的行

我给VBA下的定义:VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率,而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想,积木编程最重要的是积木如何搭建…

Hadoop的HA模式搭建

准备三台虚拟机 bigdata007,bigdata008,bigdata009 1.前置工作 1.修改虚拟机的IP地址和hostname 2.配置集群中的ip映射(/etc/hosts) 192.168.111.57 bigdata007 192.168.111.58 bigdata008 192.168.111.59 bigdata0093.关闭虚拟…

千万慎投!自引率高达93%!这16本On hold正处于高危状态,无法检索,剔除岌岌可危中!近四年镇压期刊“出狱”情况一览

本周投稿推荐 SCI • 能源科学类,1.5-2.0(25天来稿即录) • CCF推荐,4.5-5.0(2天见刊) • 生物医学制药类(2天逢投必中) EI • 各领域沾边均可(2天录用&#xff09…

昇思25天学习打卡营第19天|LSTM+CRF序列标注

概述 序列标注指给定输入序列,给序列中每个Token进行标注标签的过程。序列标注问题通常用于从文本中进行信息抽取,包括分词(Word Segmentation)、词性标注(Position Tagging)、命名实体识别(Named Entity Recognition, NER)等。 条件随机场&#xff08…

thinkphp 生成邀请推广二维码,保存到服务器并接口返回给前端

根据每个人生成自己的二维码图片,接口返回二维码图片地址 生成在服务器的二维码图片 控制器 public function createUserQRcode(){$uid = input(uid);if

【VUE进阶】安装使用Element Plus组件

Element Plus组件 安装引入组件使用Layout 布局button按钮行内表单菜单 安装 包管理安装 # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus浏览器直接引入 例如 <head><!-- I…

万字总结XGBoost原理、核心参数以及调优思路(上篇)

万字总结XGBoost原理、核心参数以及调优思路&#xff08;上篇&#xff09; 在数据科学领域&#xff0c;XGBoost以其卓越的性能和灵活性&#xff0c;成为了众多机器学习算法中的佼佼者。作为一种梯度提升框架&#xff0c;XGBoost通过构建决策树的集合来最小化一个可微分的损失函…

简洁易用,快速制作高品质产品册的工具

在数字化时代&#xff0c;高效制作高品质产品册的需求日益增长。市场上涌现出众多声称能够帮助快速制作产品册的工具&#xff0c;但真正能兼顾简洁易用和品质的却寥寥无几。 ​这款工具名为“FLBOOK”&#xff0c;它凭借其强大的功能和简单易用的操作界面&#xff0c;赢得了众多…

深入理解FFmpeg--libavformat接口使用(一)

libavformat&#xff08;lavf&#xff09;是一个用于处理各种媒体容器格式的库。它的主要两个目的是去复用&#xff08;即将媒体文件拆分为组件流&#xff09;和复用的反向过程&#xff08;以指定的容器格式写入提供的数据&#xff09;。它还有一个I/O模块&#xff0c;支持多种…

自动化回复信息工具的开发分享!

在当今信息爆炸的时代&#xff0c;无论是个人还是企业&#xff0c;都面临着大量的信息处理和回复工作&#xff0c;为了提高效率&#xff0c;自动化回复信息工具变得越来越重要。 本文旨在分享一个简单但实用的自动化回复信息工具的五段源代码开发过程&#xff0c;帮助读者理解…

Datawhale 2024 年 AI 夏令营第二期——电力需求预测挑战赛

#AI夏令营 #Datawhale #夏令营 1.赛事简介 随着全球经济的快速发展和城市化进程的加速&#xff0c;电力系统面临着越来越大的挑战。电力需求的准确预测对于电网的稳定运行、能源的有效管理以及可再生能源的整合至关重要。 2.赛事任务 给定多个房屋对应电力消耗历史N天的相关…

水库水电站泄洪预警系统解决方案

一、方案背景 水电站建立的初衷有两个&#xff0c;一是用于发电&#xff0c;二是用于调节水量&#xff0c;解决下游洪涝灾害。水电站在丰水期蓄水、枯水期泄洪&#xff0c;泄洪时产生的水流又急又大&#xff0c;对电站大坝及下游存在巨大危险。为了加强水电站工程安全管理&…

对比H100与4090:两者谁才是更好的GPU算力选择?

在进行深度学习和人工智能的应用时&#xff0c;挑选最合适的硬件工具对于模型的训练和推断任务显得尤为关键。尤其在大模型的训练上&#xff0c;英伟达4090或许并不是最合适的选项。进行训练任务时&#xff0c;通常要求有更大的显示存储容量、更宽的内存带宽以及更出色的计算性…

浅说背包问题(上)

背包问题 什么是背包问题背包的分类01背包思路一思路二思路三&#xff08;重头戏&#xff09;常规代码空间优化 例题讲解[NOIP2001 普及组] 装箱问题题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示思路 最大约数和题目描述输入格式输出格式样例 #1样例输入 #1样例…

商品分类左右联动

1、先看效果 2、以hooks方法处理&#xff0c;方便复制使用&#xff0c;见代码 Good.vue文件 <script setup lang"ts" name"goods">import {onMounted, ref, nextTick} from "vue";import useProductScroll from "/utils/hooks/useP…

halcon序列化机制

可以结合halcon算子的.net程序进行面向对象的编程&#xff1a; 源码如下&#xff1a; 打开算子的.net程序&#xff1a; 将程序运用到C#中&#xff1a; halcondonet.dll源码解读 halcon与C#联合编程的demo halcon的序列化机制 采用二进制进行序列化保存和反序列化 步骤&#…

GigE Vision GVCP/GVSP

GIGE协议&#xff0c;全称Gigabit Ethernet Vision协议&#xff0c;是一种基于千兆以太网&#xff08;Gigabit Ethernet&#xff09;技术开发的相机接口标准&#xff0c;主要用于高速图像采集和处理。该协议通过以太网技术实现图像数据和控制信号的传输&#xff0c;具有低成本、…

【Conda】命令大全 + 包安装报错一招解决

conda常用命令总结 一、conda常用命令大全 命令用法命令获取版本号conda -V conda --version获取帮助conda -h conda --help获取环境相关命令的帮助conda env -h所有 --单词 都可以用 -单词首字母来代替比如 -version 可以用 -V来代替&#xff0c;只不过有的是大写…

float、double

按照这个规定&#xff0c;单精度浮点数&#xff08;float&#xff09;这个数据类型所占内存大小为4个字节&#xff0c;也就是32位&#xff0c;所以单精度浮点数也叫32位浮点数&#xff0c;它在内存或硬盘中要占用32个比特。 单精度浮点数的尾数部分用23位存储&#xff0c;加上默…