Vue模板中保留HTML注释的方法大全

1. 使用 `v-html` 指令 (推荐)

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

<script>
export default {
  data() {
    return {
      htmlWithComments: `<!-- 这是一个HTML注释 -->
      <p>正文内容</p>
      <!-- 另一个注释 -->`
    }
  }
}
</script>

2. 使用 `v-pre` 指令

v-pre会跳过该元素及其子元素的编译，保留原始内容：

<template>
  <div v-pre>
    <!-- 这个注释会被保留 -->
    <p>这段内容不会被Vue编译</p>
    {{ 这里的插值表达式也不会被解析 }}
  </div>
</template>

3. 使用 `comments` 选项 (Vue 2.x)

在Vue 2中，可以在根实例选项中启用注释：

new Vue({
  el: '#app',
  comments: true, // 启用注释
  template: `<!-- 注释内容 --><div>Hello</div>`
})

4. 使用 `render` 函数

<script>
export default {
  render(h) {
    // 使用数组包含注释节点
    return h('div', [
      // 注释节点
      this.$createComment('这是注释内容'),
      h('p', '正文内容'),
      this.$createComment('另一个注释')
    ])
  }
}
</script>

5. Vue 3中的 `v-bind` 语法

Vue 3中可以使用v-bind绑定innerHTML：

<template>
  <div :inner-html="htmlContent"></div>
</template>

<script setup>
const htmlContent = `<!-- Vue 3注释 -->
<p>内容</p>`
</script>

6. 特殊情况：组件模板中的注释

<template>
  <!-- 这个注释在开发环境会被保留，生产环境会被移除 -->
  <div>
    <!-- 组件内的注释 -->
    <slot></slot>
  </div>
</template>

注意事项：

生产环境优化：Vue在生产构建时会默认移除所有注释

// vue.config.js 或 vite.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = false
      return args
    })
  }
}

Vue 3的编译器选项：

// 创建Vue应用时
import { createApp } from 'vue'

const app = createApp(App, {
  compilerOptions: {
    comments: true // Vue 3中默认注释是被移除的
  }
})

性能考虑：保留大量注释会增加包体积，建议仅在必要时使用

实用示例：

<template>
  <div>
    <!-- 方案1：使用v-pre -->
    <div v-pre>
      <!-- 保留原始模板注释 -->
      <p>Static content</p>
    </div>

    <!-- 方案2：动态插入带注释的内容 -->
    <div v-html="dynamicContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicContent: `<!-- 服务器端生成的注释 -->
      <section>
        <h2>标题</h2>
        <!-- 内容说明 -->
        <p>正文</p>
      </section>`
    }
  }
}
</script>

选择合适的方法取决于你的具体需求：