在NAS上部署个图表案例库怎么样？（上）

0x00 前言：

问题来源是这样的，做为一个后端程序员最近接手一个前端的项目（公司真是不行了，前端程序员离职不新招一个，竟然把工作交换给一个后端）。这个项目刚开始，有很多图表都没做，前端只交接给我一个示例网站，让我去找例子参考一下实现。
这个网站就是：http://ppchart.com/
但是我访问时总报一个脚本错误，如下图：

再仔细研究发现是我的浏览器去广告插件给cdn的js给屏蔽了。

然后，我解除了屏蔽，发现访问速度也不是很理想。
再仔细看一下，这个网站原来是一个个人的开源项目，项目部署在作者自己购买的服务器上，可能是性能和带宽都有限，作者这个项目收到的赞助费用也不多。
我想既然开源了，我还是把源码clone下来自己部署一下吧，免得作者哪天服务器出问题访问不了

0x01 我的部署方案：

我的想法很简单，把源码clone到本地编译打包一份，然后用Nas的webstation或docker部署个站点就可以了。

0x02 开始踩坑了，一个又一个：

前端源码从https://github.com/ppchart/ppchart pull到本地。
看一下是框架是“Vue 3 + TypeScript + Vite”。
虽然我不太懂，但是运行编译还应该是没问题的。
首次,npm install安装依赖，然后在npm run start运行项目看看，第一个坑就出现了，啥意思，没有权限打开80端口吗？

换个端口，还是一样

最后发现，用管理员权限可以运行。

打开主页看一下吧，然后主页不显示，看一下有个错误。

找一下，是缺少文件吗！

有这个文件，首字母是大写，是因为我的开发机是linux区分大小写的问题吗，改写一致的吧。

改完之后，首页显示一半，下面的示例列表不显示下，看一下什么错误：

原来列表数据是从后端取的，但是后端不开源。作者这个后端验证了访问来源，不是官网前端地址的请求属于非法的。
做为老码农的我，很快就想到解决方法。网页的xhr请求不行，那我写个爬虫，把数据保存成本地文件，再用读取本地文件的方式加载，或者以后导入到我自己的数据库中，以后可以自己实现个后端就可以了。
保存后端数据到本地文件基本是成功的，为什么没完全成功呢。因为作者在服务器做了设置，不能请求太快太频繁。否则会返回一个"大兄弟，咱慢点访问"的错误提示。

我保存了几页的数据已经够用了，接下来改下程序看加载本地文件好用不！

示例列表没问题了

0x03 还有个巨坑，待继吧：

还有啥坑呢，还记得最开始运行因为大小写不一致导致找不到的Init.vue文件吗？在相同目录下还有个“Editor.vue”的文件，这个文件内容是空的，作者没有把内容提交到github。

这个文件是就是用来展示示例的代码和运行效果的，还可以修改代码和echart版本。官网截图如下：

以后现在的前端水平能实现如下这个B样：

大家等我有空再钻研一下这个页面的实现吧，如果着急用的话，给项目原作者打赏，看他能不能把代码做到完全开源。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～