不使用vue-i18n在Vue文件中获取HTML的lang属性方法

不用依赖vue-i18n，直接借助浏览器原生API就能拿到index.html的lang属性——Vue运行在浏览器环境里，完全可以直接访问DOM元素：

步骤1：在App.vue中获取lang属性 #

在<script setup>里通过document.documentElement.lang直接获取根html标签的lang值，用ref包装后可在模板中响应式使用（如果不需要响应式，直接存普通变量也可以）：

<script setup>
import { ref, computed } from 'vue'
const person = computed(() => {
    return dummyData.name
})
const years = ref(dummyData.age)

// 获取index.html的lang属性
const pageLang = ref(document.documentElement.lang)
</script>

步骤2：在模板中使用或根据语言做逻辑处理 #

拿到lang值后，既可以直接在模板里展示，也能根据不同语言切换内容：

<template>
    <div class="m-0 row vh-100 justify-content-center align-items-center "> 
        <div class="col-auto bg-primary p-5 text-center text-white rounded-3 ">
            <p>{{ person }} it's my name</p>
            <p>I'm {{ years }} years old</p>
            <!-- 展示当前页面语言 -->
            <p>当前页面语言: {{ pageLang }}</p>
            
            <!-- 示例：根据语言切换文本 -->
            <p v-if="pageLang === 'en'">Hello!</p>
            <p v-else-if="pageLang === 'zh-CN'">你好！</p>
        </div>
    </div>
</template>

补充：处理动态修改lang的场景 #

如果你的业务中存在动态修改html lang属性的情况（比如用户手动切换语言），可以通过监听DOM属性变化来同步更新：

// 在<script setup>中添加监听逻辑
import { watchEffect } from 'vue'

watchEffect(() => {
    const observer = new MutationObserver(() => {
        pageLang.value = document.documentElement.lang
    })
    // 监听html标签的lang属性变化
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] })
    
    // 组件卸载时停止监听
    return () => observer.disconnect()
})

不过大部分静态场景下，初始化时获取一次lang值就足够了。

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