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

ElementUI从unpkg.com下载到本地方法指南以及配置Nginx本地服务器镜像「建议收藏」element-ui是一款非常好用的前端框架。我们今天谈的是不用前端构建框架,而直接引用element-ui。在官网指南中,官方建议使用cdn来使用:https://element.eleme.cn/#/zh-CN/component/installation<!–引入样式–><linkrel=”stylesheet”href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css”><!–

@[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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10757.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注