vue template 注释部分，在浏览器中无法展示

最新推荐文章于 2025-04-01 20:15:38 发布

鬼谷中妖

最新推荐文章于 2025-04-01 20:15:38 发布

阅读量4.3k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/a562550212/article/details/81669184

版权

前端专栏收录该内容

41 篇文章

订阅专栏

先下结论：Vue 2.4.0新增的comments属性，无法在vue单文件中使用。

vue 2.4.0 新增特性

add comments option to allow preserving comments in template (#5951) (e4da249), closes #5392

添加comments选项来保留template的注释

官网文档：
https://cn.vuejs.org/v2/api/#comments
主要看限制：这个选项只在完整构建版本①中的浏览器内编译②时可用。

①：我用的是vue-cli命令生成的目录，默认的写法是这样的

`import Vue from vue`

此处的vue指的是 dist/vue.runtime.common.js，这个可以打开node_module/vue/package.json main属性查看。
所以我修改为

import Vue from '../node_modules/vue/dist/vue.esm

②：浏览器内编译
使用*.vue文件都是通过nodejs编译，不是浏览器编译。这里的浏览器内编译指的是这样的。

https://stackoverflow.com/questions/47426675/vue-html-comment-handling

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>
<div id="myApp">
    <div class="some-content">
        This is some content
    </div>
    <!-- Comments -->
    <div v-html="comments"> {{ comments }} </div>

    <div class="some-other-content">
        This is some content
    </div>
</div>
var productTemplate = new Vue({
    el: '#myApp',
    comments: true,
    data: {
      comments: `    <!--[if mso]>
      <div>
          this div will only be shown if the condition in the comment is true, in this case the condition is:
          if ( mso (microsoft office) == the html rendering engine) {
            show the html code between the [if mso] and the [endif]
          }
      </div>
    <![endif]-->`
    }
});