Quasar SSR模式下如何在客户端渲染前修改HTML lang属性？

方案一：服务端渲染阶段直接注入lang属性 #

在Quasar SSR的src-ssr/server-entry.js文件中，直接在服务端渲染时修改HTML模板的lang属性，从根源避免水合不匹配问题：

// src-ssr/server-entry.js
export default function ({ app, render, serve }) {
  // 从全局Vue I18n实例获取当前locale值
  const locale = app.config.globalProperties.$i18n.locale.value
  // 替换HTML标签的lang属性
  serve((html) => {
    return html.replace('<html', `<html lang="${locale}"`)
  })
}

方案二：修复useMeta的配置错误 #

之前使用useMeta时lang始终为'en-US'，核心问题是键名写错（应该是htmlAttrs复数形式），同时确保正确追踪locale的响应式变化：

import { useI18n } from 'vue-i18n'
import { useMeta } from 'quasar'

export default {
  setup() {
    const { locale } = useI18n({ useScope: 'global' })
    useMeta(() => ({
      htmlAttrs: {
        lang: locale.value
      }
    }))
  }
}

方案三：客户端挂载时同步状态（可选） #

如果担心服务端渲染后的状态不一致，可以在客户端挂载时做一次同步，这不会触发水合问题，因为服务端已经输出了正确的lang值：

// 在App.vue的setup函数中
import { useI18n, onMounted } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n({ useScope: 'global' })
    onMounted(() => {
      document.querySelector('html').setAttribute('lang', locale.value)
    })
  }
}

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