ECharts 部署教程

国内的网络环境访问 ECharts 文档经常会抽风，访问速度很慢，或者压根加载不出来。这篇教程会教你如何在本机或内网部署一个站点，提升文档访问速度。

一、准备工作

新建一个文件夹，用于存放站点相关源码，直接使用命令创建并进入：

mkdir echarts-deploy && cd echarts-deploy

在此目录下，将下面所有仓库的代码全部克隆下来（仓库体积较大，耐心等待）：

• echarts-website

  git clone https://github.com/apache/echarts-website.git
  

• echarts-www

  git clone https://github.com/apache/echarts-www.git
  

• echarts-examples

  git clone https://github.com/apache/echarts-examples.git
  

• echarts-doc

  git clone https://github.com/apache/echarts-doc.git
  

• echarts-theme-builder

  git clone https://github.com/apache/echarts-theme-builder.git
  

• echarts-handbook

  git clone https://github.com/apache/echarts-handbook.git
  

二、构建

这几个仓库分为主仓库（echarts-website）和子仓库（其他），我们要先构建子仓库的代码，构建成功后，脚本会将构建产物复制到 echarts-website 目录下。也就是说，echarts-website 目录就是网站的根目录，后面要注意修改配置文件中的路径。

项目比较老，文档中没有说明 Node 版本，踩了不少坑。最好使用 Node 14，如果报错，再尝试 Node 16。

建议 Windows 用户使用 Git Bash 代替默认终端，可以避免一些问题。

1. echarts-handbook

• 进入 echarts-handbook 目录，执行 npm i 安装依赖

• 修改 configs/config.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口

  

• 执行 npm run build:localsite 打包，打印出下面的日志，说明构建成功

  

2. echarts-examples

• 进入 echarts-examples 目录，执行 npm i 安装依赖

• 找到 echarts-examples/src/explore/ExampleCard.vue ，如下图所示，修改exampleLink 的返回值：

  

• 执行 npm run localsite 打包，打印出下面的日志，说明构建成功

  

3. echarts-doc

• 进入 echarts-doc 目录，执行 npm i 安装依赖

• 修改 config/env.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口

  

• 执行 npm run localsite 打包，打印出下面的日志，说明构建成功

  

4. echarts-www

• 进入 echarts-www 目录，执行 npm i 安装依赖

• 修改 config/env.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口

  

• 执行 npm run localsite 打包，打印出下面的日志，说明构建成功（这个过程比较长，耐心等待）

  

三、测试

我这里使用 node 的 serve 包来测试。

• 全局安装 serve

  npm i serve -g
  

• 回到 echarts-website 目录

• 启动服务（-p 指定端口，默认 3000）

  serve . -p 3000
  

• 访问 http://localhost:3000

  

  

四、其他

最终生成的 echarts-website 目录就是网站的根目录，包含所有文件，可以在这个目录的基础上构建 Docker 镜像，或者使用 Nginx 提供服务。

关于 Docker 和 Nginx 的用法不在本文讨论范围，感兴趣的朋友可以自己折腾。