vue使用v-html不执行script标签代码解决

页面公共头尾要引用外部通用的代码，所以是接口数据以文本形式返回的。以v-html的形式加载进页面的，除了script标签内的和script src引入的，都正常的展示了。

v-html加载的js是不会执行的

• 解决

<template>
  <div v-html="headerHTML"></div>
</template>
<script>
import { getPublicHeader } from '@/request/api'
export default {
  data() {
    return {
      headerHTML: ''
    }
  },
  mounted() {
    this.initMethods()
  },
  methods: {
    async initMethods() {
      await this.getHeader()
    },
     async getHeader() {
      const res = await getPublicHeader()
      this.headerHTML = res
      var reg = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
      var result = res.match(reg)
      let scriptText = []
      let scriptList = []
      result.forEach((item) => {
        var reg2 = /<script>([\s\S]*?)<\/script>/
        if (item.match(reg2)) {
        let script = document.createElement('script')
          scriptText.push(item.match(reg2)[1])
        } else {
          var reg3 = /<script.*?src="(.*?)".*?\/?>/i
          const url = item.match(reg3)[1]
          scriptList.push(url)
        }
      const list = scriptList.map((item) => {
        return loadJs(item).then((res) => true)
      })
      //解决script标签内写入的js依赖src引入的js文件的问题
      Promise.all(list).then((values) => {
        scriptText.forEach((text) => {
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.text = text
          document.getElementsByTagName('body')[0].appendChild(script)
        })
      })
    }
  }
}
</script>