fe-interview

fe-interview copied to clipboard

[vue] vue渲染模板时怎么保留模板中的HTML注释呢？

<template comments>
  ...
</template>

<template comments>
  ...
</template>

<template comments>
...
<template>

<template comments> ... <template>

设置comments属性，官网默认为舍弃注释

注释必须位于要保留的根元素内。 comments: true 属性不适于单文件属性

<template comments>
<!--我是注释内容-->
</template>

<script>
export default {
    comments: true;
}
</script>

comments设为true，默认false，设为true之后将会保留且渲染模块中的HTML注释，

Vue默认舍弃注释，可以通过设置comments来开启，相关文档

<template comments>
	<div>
		<!--我是注释内容-->
	</div>
</template>

注释一定要在根元素之内

<template comments>
	<!--我是注释内容-->
	<div></div>
</template>

这样注释是不生效的。这是vue-loader提供的支持

或者

new Vue({
    el: "#app",
    comments: true
});

注意：在单文件组件设置是不生效的

<script>
    export default {
    	comments: true
    }
</script>

相关issue

1.使用注释： 在 Vue 模板中，可以使用 注释，这种注释会被保留在渲染后的 HTML 中。 2.使用v-pre指令： 你还可以使用 v-pre 指令，该指令告诉 Vue 跳过这个元素和它的所有子元素的编译过程。这样，元素中的所有内容（包括注释）都会原封不动地保留在渲染后的 HTML 中。