在内网实现 UI 组件库离线文档访问：iView 和 Arco Design 实操指南

前端

2023-11-17 18:46:38

引言

在开发过程中，开发人员经常需要查阅 UI 组件库的文档以了解组件的用法和属性。然而，在内网环境中，由于网络限制或安全原因，直接访问在线文档可能不方便。因此，制作离线文档成为了一种可行的解决方案。

本指南将详细介绍如何创建 iView 和 Arco Design UI 组件库的离线文档，并使用 nginx 在内网中进行访问。我们将分步指导您完成整个过程，确保您能够在没有互联网连接的情况下轻松访问这些文档。

先决条件

iView 或 Arco Design UI 组件库已安装
nginx Web 服务器
文本编辑器（如 Visual Studio Code 或 Sublime Text）
对 HTML、CSS 和 JavaScript 的基本了解

第 1 步：生成静态 HTML 文档

对于 iView： 使用 vuepress 工具生成静态 HTML 文档。运行以下命令：
```
vuepress build docs
```
对于 Arco Design： 使用 docsify 工具生成静态 HTML 文档。运行以下命令：
```
docsify serve docs
```

第 2 步：配置 nginx

创建一个新的 nginx 配置文件（例如 /etc/nginx/sites-available/ui-docs）。

在配置文件中添加以下内容：

server {
    listen 80;
    server_name ui-docs.example.com;  # 替换为您的域名或 IP 地址

    location / {
        root /path/to/generated/docs;  # 替换为生成的 HTML 文档目录
        index index.html;
    }
}

第 3 步：启动 nginx