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