概述

前端 UI 组件库层出不穷，版本更新又是你追我赶，查看官方文档网站是前端工程师日常行为，如果开发机无法连接互联网就会非常不方便（CTRL+C / CTRL+V 已然不香 😭）。

为了能够在内网查询 UI 组件库文档，我将自己平时常用的库制作成离线版，配合 nginx 进行访问。目录结构如下：

/www
|---- /docs/
|----|---- /iview
|----|---- /arco-design

# 用户通过 http://IP/docs/iview、http://IP/docs/arco-design 进行访问

# nginx 配置如下
location /docs/iview {
   alias   /www/docs/iview;
   try_files $uri $uri/ /docs/iview/index.html;
}
location /docs/arco-design {
   alias   /www/docs/arco-design;
   try_files $uri $uri/ /docs/arco-design/index.html;
}

iView

View UI®，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。该库目前仅支持 VUE2

iVIew 官网没有文档仓库（没办法本地编译），需要将官网的资源下载到本地然后进行配置，基本思路为：

下载 js、css 资源（vendors、main、相关 chunk、字体文件等）
修改 vendors.xxx.js 中资源路径前缀（搜索 file.iviewui.com/dist/ 即可找到，改为 /docs/iview）
修改 main.xxx.js 中路由的设置（修改 HISTORY 模式的 base 为 /docs/iview）

第三步为可选，并不影响使用。如果不修改则地址栏中的路由是以根目录为准，比如按钮页面为/components/button而不是我们想要的/docs/iview/components/button。

人工操作太费时间，我写了个工具：ViewUI 离线文档生成器，执行结果如下图所示：在这里插入图片描述

Arco Design

Arco Design 是字节跳动出品的 UI 库，这里专指VUE版本

克隆仓库到本地
按照官网文档安装 yarn 及 lerna，接着执行 yarn install
修改 packages\arco-vue-scripts\src\configs\vite.site.prod.ts 的 base 为 /docs/arco-design/
修改 packages\arco-vue-docs\router.ts 中 createWebHistory("/docs/arco-design/")
执行 npm run init
执行 npm run build:site（得到 packages\arco-vue-docs\dist 的内容即可）

热门 UI 组件库离线文档制作教程（iView、Arco Design）

概述

iView

Arco Design