v-pre指令应该告诉Vue不要编译模板的这一部分，但是如果它的内容包括（例如）<script>标签，Vue似乎仍然会抛出相同的警告。在任何情况下，它都不会将其显示为原始HTML的内容。你需要将其提取到数据变量中，并且 not 在这里使用v-html（这与你想要的相反）：

new Vue({
  el: '#app',
  data() {
    return {
      codeSample: `
<template>
    <vlider
    :id="'first'"
    :vlider-data="slider"
    :theme="'theme-dark'"
    v-model="inputRange"
    @click="vliderClick()"
    >
        <template> slot="bullet" slot-scope="bullet"
            <label>{{ bullet.data.label }}</label>
            <i
            class="em"
            :class="['em-\${bullet.data.extras.icon}']"
            ></i> 
            <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
        </template>
    </vlider>
</template>
<script>
    import Vlider from "vlider";
    export default {
        name: "app",
        components: {
            Vlider
        },
        data() {
            return {
                inputRange: null,
                slider: [
                    {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                    {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                    {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                    {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                    {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                    {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                ]
            };
        },
        watch: {
            inputRange() {
                console.log(this.inputRange)
            }
        },
        methods: {
            vliderClick() {
                console.log('clicked')
            }
        }
    };
</\script>
<style>
    import "vlider/src/sass/vlider.scss"
</style>
        `
    }
  }
});

个字符
当然，在数据变量中嵌入大块的HTML有点笨拙，并且需要对各种片段进行一些转义（例如示例中包含的${...}和</script>标记）。如果您通过apache或作为webpack import导入该HTML字符串，而不是像我在这里所做的那样直接将其嵌入data()，则可能更容易维护。
(You如果你想给你的代码示例添加语法颜色，也可以看看vue-highlightjs;这也取决于源代码是否在组件数据变量中，而不是内联在模板中。）

或者简单的方法

如果你愿意提前转义html，你可以直接把它放到模板中，然后使用v-pre告诉Vue忽略嵌入的html中的任何胡子符号：

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">

  <pre><code v-pre>&lt;script&gt;... {{foo}} &lt;/script&gt;</code></pre>

</div>

的字符串

用户v-html [docs][1]，不要忘记在每个换行符后使用\来继续字符串，并通过\'忽略''作为文本上下文
因此，应：

<div v-html="example">
     <pre>
      ...
     </pre>    
    </div>

字符串
或

<div>
  {{example}}
</div>

型
和example，您在data（）[1]中定义它：https://v2.vuejs.org/v2/guide/syntax.html?#Raw-HTML

你可以使用VueCodeBlock来显示代码.它还带有惊人的主题，可以配置在黑暗和光明模式

<template>
    <VCodeBlock
      :code="code"
      highlightjs
      lang="javascript"
      theme="neon-bunny"
    />
 </template>
 <script setup>
   const code = ref(`const text = 'hello'`)
 </script>

字符串

所以我通过使用这个网站来编码我的代码https://mothereff.in/html-entities来修复它
然后我使用编码后的版本并将其放入变量中并将其传递给v-html，vue将其视为字符串并将其显示为字符串

<pre>
  <code v-html="yourCodeVariable">
  </code>
</pre>
...
<script>
...
data() {
  return {
     yourCodeVariable: `your encoded html code here`
  }
}
...

字符串