iframe内嵌vue页面

IFrame是一种HTML标签，用于在一个网页中嵌入另一个网页的内容，就像一个小窗口一样。如果你想在一个HTML页面中内嵌Vue.js编写的动态内容，可以使用iframe来加载一个包含Vue应用的HTML文件或者运行Vue的静态站点。

步骤如下：

1. **创建Vue应用**：首先，在外部页面上使用`<script>`标签引入Vue.js库，并且编写你的Vue组件代码。

<!-- 外部页面 (index.html) -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. **创建Vue单页应用**：在另一个HTML文件（如`app.vue`）中，构建你的Vue组件。

<!-- app.vue -->
<template>
  <div>Hello from Vue in an iframe!</div>
</template>

<script>
export default {
  name: 'MyVueApp',
};
</script>

3. **将Vue应用嵌入IFrame**：在外部页面（index.html）中，创建一个iframe并设置其src属性指向包含Vue应用的HTML文件。

<!-- index.html -->
<iframe id="myIframe" src="app.html"></iframe>

4. **更新iframe内容**：如果需要动态更新iframe内的Vue应用内容，通常通过JavaScript操作iframe元素，但是这可能涉及到跨域问题，需要服务器支持同源策略（CORS）才能正常工作。

注意：
- 因为浏览器的同源策略限制，直接操作iframe内的DOM可能会受限。
- 对于SEO来说，搜索引擎可能不会索引iframe中的内容。