element-ui离线文档制作

第一步: 克隆源代码

Gitee地址: https://gitee.com/ElemeFE/element.git

GitHub地址: https://github.com/ElemeFE/element.git

# 代码克隆(本地需要有git环境)
git clone element-ui代码地址

第二步: 打包

查看package.json文件, 找到scripts节点, 此节点用于指定脚本命令, 供npm直接调用. 在script中找到带有deploy的节点, 会发现有两个命令deploy:build和deploy:extension, 我们要用到的就是这个deploy:build命令, 从名字可以看出,这个命令是用来部署构建的, 运行此命令

# 先安装依赖
npm install
# 依赖安装完成后, 运行构建部署命令
npm run deploy:build

打包完成后在element\examples目录下可以发现生成了一个文件夹element-ui,这个就是我们需要的项目

第三步: 发布

打包完成后, 我们只需要使用静态服务器发布打包完成的element-ui文件夹就可以了

不发布也可以, 直接点开element-ui文件夹下的index.html也是一样的访问文档,发布只是方便我用IP+端口的形式直接在浏览器中查看文档,直接将index.html发送到桌面快捷方式也可以

######## 使用anywhere启动element-ui离线文档
# 全局安装静态服务器 anywhere
npm install anywhere -g
# 在element-ui文件夹下启动anywhere并指定离线文档的端口
anywhere -p 8088
######## 使用http-server启动element-ui离线文档
# 全局安装静态服务器 http-server
npm install http-server -g
# 在element-ui文件夹下启动http-server并指定离线文档的端口
http-server -p 8088

启动anywhere或者http-server并指定端口成功后,就可以在浏览器中以IP+端口的形式访问离线版的element-ui文档了(此时还有点问题,看下面的解决方法)

第四部: 解决离线后某些资源找不到的问题

在电脑联网的情况下可以正常显示,但是当电脑完全断网时,有些资源是访问不到的, 此时你再打开离线文档, 发现页面一片空白, 处理这种情况很简单, 将无法访问的资源下载到本地, 并在离线文档的index.html中更改关联就可以了,具体哪些资源无法访问,可以查看浏览器控制台, ERR_NAME_NOT_RESOLVED就是没有找到资源, 具体情况具体分析, 我本地浏览器控制台显示这些文件无法找到:

--- color-brewer.css
--- vue.runtime.min.js
--- vue-router.min.js
--- font_137970_p1tpzmomxp9cnmi.css
--- highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js

看控制台, 无法找到的资源会在控制台显示出来:

--- color-brewer.css
127.0.0.1/:8 GET http://shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css net::ERR_NAME_NOT_RESOLVED
--- vue.runtime.min.js
127.0.0.1/:20 GET http://shadow.elemecdn.com/npm/vue@2.5.21/dist/vue.runtime.min.js net::ERR_NAME_NOT_RESOLVED
--- vue-router.min.js
127.0.0.1/:21 GET http://shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js net::ERR_NAME_NOT_RESOLVED
--- highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js
127.0.0.1/:22 GET http://shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js net::ERR_NAME_NOT_RESOLVED
--- font_137970_p1tpzmomxp9cnmi.css
127.0.0.1/:6 GET http://at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css net::ERR_NAME_NOT_RESOLVED

解决资源无法找到的问题:

下载无法找到的资源到本地, 并在index.html中关联(资源地址在控制台报错时其实就显示了, 直接复制地址贴到下载器下载下来就行)

下载完成后, 在index.html中关联资源地址 (我本地将下载的JS放在了element-ui文件夹下的static\js\文件夹中, css放在了static\css\文件夹中, 这样后面拷贝就可以直接将所有文件都拷贝走,哪里需要就直接发布一下就能用了)

<!--以下是原本的路径,可以看到都是网络路径,所以离线时才会访问不到,导致离线文档加载出错,一片空白-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css">
<link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">

<script src="//shadow.elemecdn.com/npm/vue@2.5.21/dist/vue.runtime.min.js"></script>
<script src="//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script src="//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>

<!--修改这些路径, 将路径改到我们本地资源所在的位置(相对于index.html的路径)-->
<link rel="stylesheet" href="static/css/font_137970_p1tpzmomxp9cnmi.css">
<link rel="stylesheet" href="static/css/color-brewer.css">
<script src="static/js/vue.runtime.min.js"></script>
<script src="static/js/vue-router.min.js"></script>
<script src="static/js/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>

再次使用静态服务器发布element-ui, 就能在设备完全无网络连接的情况下访问离线文档了(资源无法找到的情况都可以使用这种方式处理,将网络资源下载到本地, 然后修改本地关联的对应位置)

关于静态服务器

静态服务器就是只支持静态资源的服务器空间, 与动态服务器不同的是, 动态服务器可以支持动态页面与数据库, 一般返回的不是文件, 而是动态生成的字符串, 而静态服务器只支持静态资源, 静态服务器只是简单的根据访问路径, 返回对应的静态文件, 有点类似于电脑上的资源管理器, 在地址栏输入某个文件的地址就能访问到相应的文件. 静态服务器只是将根路径绑定在了网站根目录下, 使用IP+地址的形式来替代根路径

去除一些外链 - 记录

将不需要的外链去除掉了部分, 比如刚进首页的跳转弹窗, 侧边目录关于angular和react的element-ui链接, 以及下拉选择版本将未离线的版本去除

/*** 这里是去除组件界面的Element React和Element Angular外链 **/
/*全局查找*/
"es":[{"name":"Changelog","path":"/changelog"}
/*删除*/
{"name":"Element React","href":"https://elemefe.github.io/element-react/"},{"name":"Element Angular","href":"https://element-angular.faas.ele.me/"},

/*全局查找*/
{"zh-CN":[{"name":"更新日志","path":"/changelog"}
/*删除*/
{"name":"Element React","href":"https://elemefe.github.io/element-react/"},{"name":"Element Angular","href":"https://element-angular.faas.ele.me/"},

/*全局查找*/
"en-US":[{"name":"Changelog","path":"/changelog"},
/*删除*/
{"name":"Element React","href":"https://elemefe.github.io/element-react/"},{"name":"Element Angular","href":"https://element-angular.faas.ele.me/"},

/**** 这里是去除进入主页 弹出的跳转提示 ***/
/*全局查找*/
n=localStorage.getItem("PREFER_GITHUB");-1<t.indexOf("eleme.cn")||-1<t.indexOf("element-cn")||-1<t.indexOf("element.faas")
/*删除*/
||n||setTimeout(function(){"zh-CN"===e.lang&&e.$confirm("建议大陆用户访问部署在国内的站点，是否跳转？","提示").then(function(){location.replace("https://element.eleme.cn")}).catch(function(){localStorage.setItem("PREFER_GITHUB","true")})},1e3)

/** version.json 这个文件存储的是版本号, 当前版本2.15.3, 去除其它版本, 这样就不会显示其它版本了 **/
"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14",