ElementUI从unpkg.com下载到本地方法指南以及配置Nginx本地服务器镜像

@[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 更新后，只需要在服务器更改一下版本号即可同步，不需要在另外下载一份了

目标：访问 网站 elment-ui@2.13.1 目录，检测本地是否有镜像文件，没有的话，去 unpkg.com 下载并缓存到本地。

配置方法（宝塔举例，其实根源还是配置 nginx.conf）

1. 打开网站管理，点击需要配置的网站进行设置
2. 打开左侧的配置文件，添加镜像代码。注意要放到防盗链配置上方

location ~ ^/element-ui@2.13.1/ {

	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 {网站目录}/element-ui@2.13.1/;
    if (!-f $request_filename) {
    	proxy_pass https://unpkg.com;
    }
}

讲上方的 {网站目录} 替换成自己的网站目录即可，现在可以直接访问使用了。

https://自己的域名/element-ui@2.13.1/lib/index.js

如果版本更新了。只需要更改上方的版本号即可。或者复制一份，或者将版本号更改成通配符，随你折腾。

如果本文给你帮助了，请您点个赞。