搭建easymock后,预览接口报错:query:182 Uncaught ReferenceError: hljs is not defined

627 阅读2分钟

1. 搭建好easymock后,点解预览接口时报错

query:182 Uncaught ReferenceError: hljs is not defined
    at HighlightBlock.update (query:182:9)
    at RequestView.update (query:222:20)
    at ResultView.update (query:392:26)
    at Main.sendRequest (query:1019:25)
    at Main.init (query:994:16)
    at umd.js:1:2308
    at r (umd.js:1:916)
    at new s (umd.js:1:2274)
    at new Main (query:979:5)
    at Frame.init (query:1063:9)
update @ query:182
update @ query:222
update @ query:392
sendRequest @ query:1019
init @ query:994
(anonymous) @ umd.js:1
r @ umd.js:1
s @ umd.js:1
Main @ query:979
init @ query:1063
(anonymous) @ umd.js:1
r @ umd.js:1
s @ umd.js:1
Frame @ query:1059
(anonymous) @ query:1096
material.css:1          Failed to load resource: the server responded with a status of 404 ()
codemirror.css:1          Failed to load resource: the server responded with a status of 404 ()
default.min.css:1          Failed to load resource: the server responded with a status of 404 ()

a975c292918a7b8a8008e27d85d6ccc.png

495701c0b343fc6b89ec0b9cd377653.png

2. 进入 web 的容器,找到 node_modules/restc/faas/index.html 文件,将下面的 highlightjs 替换掉

<script src="https://github.elemecdn.com/highlightjs/cdn-release/9.8.0/build/highlight.min.js"></script>

替换为:

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>

3. 如何替换 highlightjs 文件

3.1 进入 web 的容器,我的 web 的容器名称是 03_web_1

# 将 03_web_1 替换为你的 web 的容器名称,可以通过 docker ps 查看容器
docker exec -it 03_web_1 bash

image.png

3.2 使用 vim or vi 在web容器中编辑 node_modules/restc/faas/index.html 文件,将文件中的 highlightjs 替换掉

# 编辑文件
vim node_modules/restc/faas/index.html
# 需要替换的内容
<script src="https://github.elemecdn.com/highlightjs/cdn-release/9.8.0/build/highlight.min.js"></script>
# 替换为
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>

3.3 如果你的web容器内没有 vim oor vi,可以通过 docker cpnode_modules/restc/faas/index.html 文件复制出来编辑

3.3.1 将文件复制到你的宿主机

# docker cp ${你的web容器名称}:/home/easy-mock/easy-mock/node_modules/restc/faas/index.html ${你的宿主机的文件目录}
docker cp 03_web_1:/home/easy-mock/easy-mock/node_modules/restc/faas/index.html /mnt/d/workspace

3.3.2 编辑 node_modules/restc/faas/index.html 文件内容,替换 highlight,替换后内容如下:

8aedd356acbcc39d3b0f2a6d877e3a4.png

3.3.3 将编辑后的 node_modules/restc/faas/index.html 文件再复制到容器内

# docker cp ${你的宿主机的目录(3.3.1中文件复制到的宿主机路径)}/index.html /home/easy-mock/easy-mock/node_modules/restc/faas/
docker cp /mnt/d/workspace/index.html 03_web_1:/home/easy-mock/easy-mock/node_modules/restc/faas/

3.3.3 验证web容器中的 node_modules/restc/faas/index.html 是否编辑成功

# 进入web容器, 将 03_web_1 替换为你的web的容器名称
docker exec -it 03_web_1 bash
# 验证 node_modules/restc/faas/index.html 文件内的内容是否是最新的,参考下图
cat node_modules/restc/faas/index.html | grep highlight

43836de4e5e7a4605c1005e724be4f8.png

4. 重启web容器

# 将 03_web_1 替换为你的web的容器名称
docker restart 03_web_1

5. 访问 http://localhost:7300,点击预览接口,可以成功展示

6bb218386fc824236de8d72a6efd93c.png