element离线文档是怎么制作的？有没有高手知道，问了一圈没有人知道

Question

element离线文档是怎么制作的？有没有高手知道，问了一圈没有人知道

网上下载的效果

打开文件以后直接点击index就能访问手册的本地静态界面

就是一个简单的文件

有没有高手知道这是怎么做的？

Answer 1

就是正常的 build 后的结果……注意替换掉一些网络路径就好了。

---

首先 clone 项目：

> git clone https://github.com/ElemeFE/element --depth=1

然后安装依赖（实际上这个项目用的是 yarn，我手头没 yarn 环境，就用 npm 搞一下）：

> npm install

再然后看下 package.json，发现有 deploy:build 这么个命令跟 example（就是文档所在目录）有关，那执行一下：

> npm run deploy:build

在 examples/element-ui 目录下已经能看到构建结果了，我们试着本地启动个 liveServer 跑跑看：

完美！

接着我们试试看直接双击打开，通过 file:// 访问，会发现打不开了。原因是页面中引入了一些网络资源，在 file:// 协议下是访问不到的：

那么我们手动把这些文件下载下来，放到目录底下，然后修改一下路径：

然后再双击打开看看：

结束。现在你可以把 examples/element-ui 这个目录下的所有东西打个压缩包发送给别人，解压缩后双击 index.html 就是所谓的“离线”文档了。

P.S. 还有一些网络资源我没更换完整，你自己也可以手动都给改了。

Answer 2

修改下答案:对于完全开源的官方文档楼下大佬说的一样，直接拉源码就对了。对于非开源的，本质上是利用网络资源抓包，把当前网站的所有资源下载下来，肯定是有一些开源的项目可以做到。
也可以使用一些浏览器插件来完成，你可以去插件商城搜索“网页下载”关键字，推荐一个插件：

梦想网页资源下载器

不过很难做到一步到位，大部分你都需要在要下载的页面去执行一下，比如首页、API页面等，最后自己汇总一下整理一下就行了。