iframe引入本地html的正确做法

问题描述

在 vue 项目开发中，用到了 wordcloud2. js 的词云包，因为特殊原因需要更改词云库的源代码（具体实现功能是增加词语的遮罩方案，从原来的只有默认细化到笔画的遮罩方案，增加一个可选配置项，可以采用词语的最小外包矩形遮罩方案）。更改源代码之后发现包中的 demo 可以正常运行，但是引入到 vue 项目中就不渲染了。尝试了多种方法均不奏效之后选择在 vue 项目中引入 demo 的静态网页。

当前文件夹结构

此时放了四个包在 vue 项目中，一个在 public 文件夹中，一个在 public 中新建的 sta 文件夹中，一个在 public 中新建的 static 文件夹（或者命名为 statics，其他的命名不可以），一个在 src 里的 static 文件夹中。

├─. Vscode
├─node_modules
├─packages
├─patches
├─public
│  ├─sta
│  │   └─bp 2 wordcloud
│  │      ├─. Vscode
│  │      ├─dist
│  │      └─src
│  ├─static
│  │   └─bp 2 wordcloud
│  │      ├─. Vscode
│  │      ├─dist
│  │      └─src
│  └─bp 2 wordcloud
│      ├─. Vscode
│      ├─dist
│      └─src
└─src
    ├─assets
    ├─components
    ├─static
    │  └─bp 2 wordcloud
    │      ├─. Vscode
    │      ├─dist
    │      └─src
    └─store

错误使用方法

错误方法一：引入 components 同级的 static 中的 html，会导致重复循环渲染 vue 的当前网页

<iframe id="iframe1" src="../static/bp2wordcloud/shape.html" class="outsidehtml" ></iframe>

错误方法二：引入 public 中的 html，这也会导致重复循环渲染 vue 的当前网页

<iframe id="iframe1" src="/bp2wordcloud/shape.html" class="outsidehtml" ></iframe>

错误方法三：引入 public 中命名为 sta 文件夹中的 html，这也会导致重复循环渲染 vue 的当前网页
 

<iframe id="iframe1" src="/sta/bp2wordcloud/shape.html" class="outsidehtml" ></iframe>

正确使用方法

在项目的 public 文件夹下新建一个 static 文件夹，将所需要的包含了目标 html 的包或者 html 文件放入该 static 文件夹中，再引入 html, 则渲染成功。
 

<iframe id="iframe1" src="/static/bp2wordcloud/shape.html" class="outsidehtml" ></iframe>