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，看似简单，实则一点也不容易，哈哈！对于纯前端还是纯后端，上面这个过程都够搞半天的，这里就公开分享给大家了！