vue3中在vue文件中使用iframe嵌入本地html,打包后路径失效?

Question

vue3中在vue文件中使用iframe嵌入本地html,打包后路径失效

在网上查了好多,都是说放在static下\这是打包后的

但是最后发现 这个static不是public下面的static,而是src下的static

这是我引入的方式

Answer 1

路径找不到了，编译之后的多半会带上hash后缀。

所以改写成 @/static/xxx 试试。
或者直接移动到 public 下面，然后用 /static/xxx

Answer 2

是实际运行iframe加载的时候，iframe的位置不准确吗？

如果是的话，可以考虑父index.html作为host的参照对象/location.origin绝对路径作为host，可以试试下面两种方式

const {data} = await getVideoUrl({...params});
// 使用这段语句的index.html和easyPlayer.html的关系就是host的内容
// 比如index.html是放在打包后最外层的，easyPlayer.html放在打包后最外层的static/easyPlayer.html
const host = './static'; // 相对index.html来说。因为这段语句最终是要加载到index.html运行的
this.videoUrl = host + '/easyPlayer.html?url='+data;

const {data} = await getVideoUrl({...params});
const host = location.origin;
// 这样就能保证iframe是 https://xxx.xxx.com/static/easyPlayer.html
// 这样就可以根据打包结果比对easyPlayer.html位置是否准确
this.videoUrl = host + '/static/easyPlayer.html?url='+data;

// 如果index.html和iframe.html同级的时候，可以这么做(下面代码仅供参考，需要改善)：
// const host = location.href.split('?')[0].split('#')[0].replace('index.html','');
// this.videoUrl = host + 'easyPlayer.html?url='+data;