Vue3迁移：如何消除JSON-LD脚本标签的编译警告？

以下几种方法可以解决Vue3对<script type="application/ld+json">标签的编译警告：

• 方法一：通过渲染函数动态生成脚本标签
  避开模板编译环节，直接在组件生命周期钩子中用Vue的h函数创建并插入JSON-LD脚本：

  <script setup>
  import { h, onMounted } from 'vue'
  // 假设从服务器接口或props获取结构化数据
  const schemaData = {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "示例产品"
  }
  
  onMounted(() => {
    const ldScript = h('script', {
      type: 'application/ld+json',
      innerHTML: JSON.stringify(schemaData)
    })
    // 将脚本插入到head标签中
    document.head.appendChild(ldScript.el)
  })
  </script>
  

• 方法二：使用<teleport>标签挂载到页面头部
  利用<teleport>的特性，将JSON-LD脚本直接渲染到<head>中，绕过组件模板的编译检查：

  <template>
    <teleport to="head">
      <script type="application/ld+json" v-html="schemaJson"></script>
    </teleport>
    <!-- 其他组件内容 -->
  </template>
  
  <script setup>
  // 从服务器获取的结构化数据，转换为JSON字符串
  const schemaData = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "示例文章标题"
  }
  const schemaJson = JSON.stringify(schemaData)
  </script>
  

• 方法三：全局修改Vue模板编译器配置
  如果项目中有大量页面需要处理这类标签，可以全局配置Vue的编译器选项，将特定类型的<script>标记为自定义元素，跳过编译检查：

  • 若使用Vue CLI，修改vue.config.js：

    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .tap(options => {
            options.compilerOptions = {
              ...options.compilerOptions,
              // 匹配type为application/ld+json的script标签
              isCustomElement: tag => tag === 'script' && tag.type === 'application/ld+json'
            }
            return options
          })
      }
    }
    

  • 若使用Vite，修改vite.config.js：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [
        vue({
          template: {
            compilerOptions: {
              isCustomElement: tag => tag === 'script' && tag.type === 'application/ld+json'
            }
          }
        })
      ]
    })
    

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