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

时间:2024-07-15 14:01:05

背景

我们有一个域名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-****博客文章浏览阅读1.1k次,点赞3次,收藏4次。try_files 的路径解析:在 try_files 指令中,文件路径可以是相对路径(相对于 root 或 alias 指定的路径)或绝对路径(相对于服务器根目录)。当路径以斜杠 / 开头时,被视为绝对路径。否则,会相对于 root 或 alias 的路径进行解析。_tryfiles vuehttps://blog.****.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,看似简单,实则一点也不容易,哈哈!对于纯前端还是纯后端,上面这个过程都够搞半天的,这里就公开分享给大家了!