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

admin管理员组

文章数量:1130349

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

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

`import Vue from vue`

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

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

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

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

<script src="https://unpkg/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/vuejs/vue/issues/6177

国内很少有文章介绍到，希望能给大家带来帮助。

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

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

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

`import Vue from vue`

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

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

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

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

<script src="https://unpkg/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/vuejs/vue/issues/6177

国内很少有文章介绍到，希望能给大家带来帮助。

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

本文标签： 注释器中Vuetemplate