vue引入html静态文件

在Vue中引入HTML静态文件可以使用`v-html`指令。首先，确保你的HTML文件已经放置在Vue项目的静态资源目录中，通常是`public`文件夹。然后，在Vue组件中使用`v-html`指令来渲染HTML内容。

以下是一个示例：

1. 将HTML文件放置在`public`文件夹中，例如`public/sample.html`。

2. 在Vue组件中引入并渲染HTML文件。

<template>
  <div>
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
    this.fetchHtmlFile();
  },
  methods: {
    fetchHtmlFile() {
      fetch('sample.html')
        .then(response => response.text())
        .then(data => {
          this.htmlContent = data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上述示例中，我们通过使用`fetch` API 获取HTML文件的内容，并将其赋值给`htmlContent`变量。然后，使用`v-html`指令将HTML内容渲染到页面上。

请记得替换示例中的文件路径和组件名称以适应你的项目。