@[TOC]目錄
element-ui 是一款非常好用的前端框架。
我們今天談的是不用前端構建框架，而直接引用 element-ui。
在官網指南中，官方建議使用 cdn 來使用：https://element.eleme.cn/#/zh-CN/component/installation
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
下載ElementUI到本地服務器
其實，在國內，有時候，這個cdn在客戶機器上並不如想象中那麼穩定。
爲了解決這個問題，很多都想到把 element-ui 的cdn下載到本地服務器，下載腳本，csdn上已經有人發出來了，本人嘗試了一下，非常好用，附原文鏈接：
https://blog.csdn.net/ttphoon/article/details/104653785
順便本人把下載的2.13.1版本放到資源庫中了，可以直接下載，我下載的是unpkg.com的全部內容，其實只需要裏面的lib目錄即可使用，具體使用方法參看 elment-ui 官網，不再複述了。
下載資源鏈接：https://download.csdn.net/download/shengshuai/12430477
配置服務器本地鏡像
當然，如果你不想下載，或者搞點高級的自己折騰一下，你可以配置一個Nginx 鏡像到 unpkg.com，可以做到按需下載，用到哪些，就緩存哪些文件。
還有一個好處就是element-ui 更新後，只需要在服務器更改一下版本號即可同步，不需要在另外下載一份了
目標：訪問 網站 [email protected] 目錄，檢測本地是否有鏡像文件，沒有的話，去 unpkg.com 下載並緩存到本地。
配置方法（寶塔舉例，其實根源還是配置 nginx.conf）
- 打開網站管理，點擊需要配置的網站進行設置
- 打開左側的配置文件，添加鏡像代碼。
注意要放到防盜鏈配置上方
location ~ ^/[email protected]/ {
proxy_redirect off;
proxy_set_header Host 'unpkg.com';
proxy_set_header Accept-Encoding deflate;
proxy_set_header X-Real-IP $remote_addr; #獲取真實ip
proxy_set_header X-Forwarded_For $proxy_add_x_forwarded_for; #獲取代理者的真實
client_max_body_size 300m; #允許客戶端請求的最大單個文件字節數
client_body_buffer_size 128k; #緩衝區代理緩衝用戶端請求的最大字節數
proxy_connect_timeout 90; #跟後端服務器連接的超時時間_發起握手等待響應超時時間
proxy_send_timeout 90; #後端服務器數據回傳時間_就是在規定時間內後端服務器必須傳完所有的數據
proxy_read_timeout 90; #連接成功後_等待後端服務器響應時間_其實已經進入後端的排隊之中等待處理
proxy_buffer_size 4k; #設置請求緩存區_這個緩存區會保存用戶的頭信息以供nginx進行規則處理_一般只要能保存下頭信息>即可
proxy_buffers 4 32k; #同上告訴nginx保存單個用的幾個Buffer最大用多少空間
proxy_busy_buffers_size 64k; #如果系統忙碌時候可以申請更大的proxy_buffers 官方推薦*2
proxy_temp_file_write_size 64k; #緩存臨時文件的大小
proxy_intercept_errors on;
expires max;
proxy_store on;
proxy_store_access user:rw group:rw all:rw;
proxy_temp_path {網站目錄}/[email protected]/;
if (!-f $request_filename) {
proxy_pass https://unpkg.com;
}
}
講上方的 {網站目錄} 替換成自己的網站目錄即可，現在可以直接訪問使用了。
https://自己的域名/[email protected]/lib/index.js
如果版本更新了。只需要更改上方的版本號即可。或者複製一份，或者將版本號更改成通配符，隨你折騰。
如果本文給你幫助了，請您點個贊。