最近用vue-element-admin做了個后臺管理系統(tǒng)摩瞎，開發(fā)完成后部署的時候決定把index.html放到web服務(wù)器上舟铜，其余的靜態(tài)資源全部放到阿里云上（cdn + oss）這樣做有以下好處：
- 釋放web服務(wù)器的帶寬
- 更快
- 更平滑的版本迭代（下面會有詳細描述）
下面為實踐過程站故，基于vue-cli3的部署過程（vue-cli2的童鞋也可以參考共苛，但是推薦vue-cli3，因為幾乎0配置～）
- 安裝webpack-aliyun-oss-plugin包
npm install webpack-aliyun-oss-plugin --save-dev
這個包的作用是在你執(zhí)行npm run build的時候直接上傳打包好的文件到你的阿里云oss上面。
- 配置vue.config.js
// 上述代碼是修改你的資源根目錄柄冲，改為你上傳到oss上的目錄放典，getTimeStr()是獲取當前時間的格式化字符串，如：20200107211212
publicPath: process.env.NODE_ENV !== 'development' ? ('https://xxx.com/dist/admin/' + getTimeStr() + '/') : './',
上面以時間命名目錄的目的就在于更好的版本過渡巡社，每次打包上傳都是一個新的以時間命名的目錄膛堤，如果用戶本地的index.html未更新，他也可以正常訪問老的靜態(tài)資源～（可以定時清除較老的靜態(tài)文件晌该，節(jié)約空間肥荔，畢竟要錢）
chainWebpack(config) {
config
.plugin('webpack-aliyun-oss-plugin')
.use(require('webpack-aliyun-oss-plugin'), [{
buildPath: 'dist/admin/**',
region: 'oss-cn-hangzhou', // 只是示例，如果是別的地區(qū)請?zhí)顒e的地區(qū)
ak: 'xxx', // 不知道ak和sk的百度以下把～
sk: 'xxx',
bucket: 'xxx', // bucket的name
filter: function(asset) {
return !/\.html$/.test(asset) // 不上傳index.html
}
}])
}
配置完成后朝群，執(zhí)行npm run build燕耿，可以看到oss上面已經(jīng)有了你剛上傳的靜態(tài)資源啦！
注意點：
如果發(fā)現(xiàn)頁面上的圖標不能正確顯示姜胖，并且字體文件的路徑確保是對的情況下誉帅，請看下oss如下配置是否正確：
在OSS控制臺，選擇Bucket后右莱，單擊 基礎(chǔ)設(shè)置蚜锨，在跨域設(shè)置中單擊 設(shè)置，進行下述配置慢蜓。
將來源（AllowedOrigin）設(shè)置成亚再，確認該配置項無誤。如果設(shè)置成后可以成功上傳晨抡，說明是之前的來源（AllowedOrigin）配置錯誤针余，請根據(jù)規(guī)則認真檢查饲鄙。
依次選擇“允許 Methods”的全部選項，即GET圆雁、PUT忍级、DELETE、POST伪朽、HEAD轴咱，確認該配置項目無誤。
將“允許 Headers”配置成*烈涮，確認該配置無誤朴肺。
將“暴露 Headers”設(shè)置為指定值或者不填，確認該項配置無誤坚洽。
