Vue3 SSR（Laravel Inertia）动态设置JSON-LD报错咨询

问题根源 #

你碰到的TypeError: Cannot convert a Symbol value to a string错误，核心原因是：

• 手动拼接的JSON字符串用了单引号，不符合JSON规范，导致Vue SSR渲染时解析逻辑出错
• v-html或插值语法处理script标签时，Vue的SSR渲染机制无法正确识别内容绑定方式

解决方案 #

1. 生成标准JSON格式字符串 #

放弃模板字符串拼接，改用JSON.stringify生成合规的JSON-LD内容，彻底避免引号和语法错误：

const webSiteJSONLD = computed(() => {
  return JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": import.meta.env.SSR ? import.meta.env.VITE_APP_URL : host.value
  });
});

JSON.stringify会自动处理双引号和转义逻辑，确保输出内容是标准JSON格式，从根源避免解析时的Symbol转换异常。

2. 正确绑定script标签内容 #

使用Vue的属性绑定:text-content.prop直接设置script的文本内容，同时配合Teleport将标签插入到head中（兼顾SEO要求和SSR渲染兼容性）：

<template>
  <teleport to="head">
    <script 
      v-if="webSiteJSONLD" 
      type="application/ld+json" 
      :text-content.prop="webSiteJSONLD"
    ></script>
  </teleport>
</template>

• :text-content.prop直接操作DOM元素的textContent属性，绕过v-html的innerHTML限制，确保JSON内容正确插入script标签内
• Teleport到head标签符合JSON-LD的SEO最佳实践，且Inertia SSR能正确处理Teleport内容，解决仅客户端生效的问题

3. 确保客户端host值安全获取 #

如果host.value是从window.location获取的，要避免在SSR阶段访问（SSR环境无window对象），可以在客户端初始化时赋值：

const host = ref('')

onMounted(() => {
  host.value = window.location.origin
})

这样computed属性在SSR时会自动使用环境变量的VITE_APP_URL，客户端则会获取到正确的host值。

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