Vue.js中如何给变量赋值HTML代码且避免被Vue解析报错

报错原因 #

该报错本质是浏览器HTML解析规则导致的：浏览器解析<script>标签内容时，只要遇到字面量</script>字符串，无论它是否位于引号包裹的字符串内部，都会直接判定为当前<script>块的结束标记，进而导致后续代码解析异常，抛出VueCompilerError: Invalid end tag错误，和Vue本身的逻辑无关。

解决方案 #

• 方法1：转义闭合标签的斜杠
  直接在</script>的斜杠前添加反斜杠转义即可，浏览器不会将转义后的内容识别为真实闭合标签：

  <script>
  imports...
  
  setup() {
    const a = a;
    const b = b;
    // 对斜杠进行转义
    const MyHTML = '<script><\/script>'
    // 模板字符串写法同理
    // const MyHTML = `<script><\/script>`
  }
  </script>
  

• 方法2：拆分字符串拼接
  把</script>拆成多段字符串拼接，避免出现完整的</script>字面量即可：

  const MyHTML = '<script>' + '</' + 'script>'
  

• 方法3：抽离到独立JS/TS文件
  如果需要存储的HTML内容较多，可将字符串定义抽离到单独的JS/TS文件中导出，再在Vue组件内导入使用。独立JS文件不会按HTML规则解析，不存在标签识别冲突问题。

补充说明 #

如果后续需要在模板中渲染这段HTML代码，使用Vue的v-html指令即可：

<template>
  <div v-html="MyHTML"></div>
</template>

内容的提问来源于stack exchange，提问作者volume one