關於利用oss託管vue的前後端分離項目

關於利用oss託管vue的前後端分離項目

前情提要

對於學生機或者小帶寬的服務器來說，第一次加載巨大的js文件簡直就是噩耗，特別是寶貴的面試官的時間，這樣的網站都不忍心寫到簡歷上去。更何況是用戶的時間，所以就考慮有沒有可以在不買大帶寬服務器的情況下該怎麼優化呢？經過簡單的調研可以有以下的方式：

• 1、在打包的同時，把依賴的第三方庫js與css利用開源免費的cdn加載方式，例如
  

這個就是直接寫，也可以在webpack時利用插件區分出來…

• 2、在部署的時候開啓nginx的gzip自己調節參數，找到一個合適自己的網站的參數組合.

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    #..
    }

• 3、對靜態資源進行cdn加速（可以用七牛雲、阿里云云等產商）
• 4、利用oss部署的方式（也是我想說的方式）其中主要困難有對url再次刷新時的重定向以及前端項目的生產項目api請求地址的配置…

具體做法

接下來我結合一個項目演示：https://github.com/zhangdaiscott/jeecg-boot

修改public/index.html的全局地址與圖片地址爲圖中所示…(官方後端)

修改utils/request.js的baseURL如圖所示。這個時候build的生產文件就可以直接用了。

vue打包上傳oss
接下來主要參考如上文章：
OSS (Object Storage Service)名爲對象存儲，配合cdn使用達到靜態文件託管加速，提升網站文件訪問速度…(亂說一通)

打包好vue文件之後，在阿里雲控制檯找到對象存儲OSS，新建一個Bucket，設置好名稱，區域，存儲類型，讀寫權限，如圖：

點確定就創建好了Bucket，接下來在基礎設置中設置靜態頁面->默認首頁爲index.html並且在鏡像回源中設置重定向，如圖：

爲什麼要這樣做，原因是vue-router我設置的是history模式，大家都知道history模式在線上需要配置nginx，如果不配置的話刷新就會導致頁面丟失。在這裏配置重定向就可以解決這個問題，需要注意的幾個點：1是回溯條件選擇HTTP狀態碼爲404的時候，2是回溯地址要選擇跳轉固定地址，帶上默認首頁index.html。

剩下的就交給阿里雲了吧(完)。

最後結果就是本來一個js1.7m現在有阿里雲oss的帶寬以及自動cdn以及gizp壓縮，大大加快了訪問速度。
這個不知道什麼時候會過期~結果展示。f12看細節