vue template 注释部分，在浏览器中没法展现

先下结论：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/#...
主要看限制 ： 这个选项只在完整构建版本①中的浏览器内编译②时可用。

①：我用的是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/que...

<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]-->`
    }
});

最最关键：

https://github.com/vuejs/vue/...

国内不多有文章介绍到，但愿能给你们带来帮助。

参考：

https://cn.vuejs.org/v2/api/#comments
https://stackoverflow.com/questions/47426675/vue-html-comment-handling
https://github.com/vuejs/vue/issues/6177