vue中使用第三方素材：iframe与访问路径_vue iframe引入public-优快云博客

这篇博客介绍了如何将使用js+html+第三方库制作的canvas特效素材导入到Vue项目中，通过在Vue组件中使用iframe来实现。首先，需要在项目/public/目录下放置素材文件，然后在Vue组件的template部分使用iframe引用该HTML文件，设置适当的宽度和高度。在生产环境中要注意路径的正确引用，避免出现资源找不到的问题。

有很多特效素材都是使用js+html+第三方库制作，本身使用常规的html开发方式，类似：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript" src="Test.js"></script>
	</head>
	<body>
    <div id='myId'>测试</div>
		<script>
			var test = new Test('myId');
		</script>
	</body>
</html>

设有一个canvas特效素材，现在希望将该素材整体导入到Vue中，像使用图片一样来使用该素材。
这样的一堆文件，要导入到Vue中，需要使用iframe。流程为：

在 项目根目录/public/ 下创建一个test文件夹，将所有的素材文件复制到这里。
创建一个vue文件，使用iframe将素材的html导入即可。

vue文件内容为：

<template>
  <div class="test-container">
    <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: './test/index.html'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.test-container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

注意引入素材的html时，必须使用./开头，且该路径中不需要包含public。
若使用/开头，调试正常，放到生产环境下可能会提示The origin server did not find a current representation for the target resource or is not willing to disclose that one exists：
404