背景：

前端專案程式碼在上傳到伺服器以後

資原始檔往往會很大

而使用的雲服務一般頻寬都會很小（頻寬很貴）

所以資源往往需要放到cdn上面來加速

節約伺服器的頻寬

這裡我們使用回源的方式來實現cdn加速

假設：

oss(或其他雲)的Bucket域名為https://static.hyf.cn

我們的站點域名為https://www.hyf.cn

專案名vue

資原始檔名assets

思路：

嘗試訪問https://static.hyf.cn/vue/assets/jQuery.min.js時

oss中查詢不到相應的檔案

自動回源到https://www.hyf.cn/vue/assets/jQuery.min.js查詢

www.hyf.cn的nginx指向/web/vue/assets/jQuery.min.js

oss成功取得檔案 將檔案儲存在oss中

oss將檔案返回給客戶端

實現：

oss映象配置

nginx目錄配置

location ^~ /vue/assets/ {
  root /web/vue/assets/;
}

專案程式碼修改

對於index.html中的靜態js

使用下面的方法引入

<script src="https://static.hyf.cn/vue/assets/jQuery.min.js"></script>

對於編譯生成的資原始檔

需要修改相應webpack配置

以vue專案為例

找到config/index.js檔案

修改build.assetsPublicPath="https://static.hyf.cn/vue/"

build.assetsSubDirectory="assets"

注意：

對於沒有找到的資原始檔一定要返回httpcode=404

千萬不可只返回vue的404頁面

否則可能出現 將這個404頁面的html內容 當作js請求jQuery.min.js的內容 的情況