Vue i18n如何自动获取用户区域设置实现日期时间本地化？

嘿，我明白你的困扰了——硬编码locale确实不够灵活，而且你已经离正确答案很近了！问题出在你把$i18n.locale当成字符串传进去了，而不是直接引用这个变量。下面一步步帮你解决：

1. 模板中直接使用当前Locale的正确写法 #

你之前的代码里，'app.i18n.locale'和'this.$i18n.locale'都是字符串字面量，Vue I18n自然找不到对应的locale配置，所以触发了回退。正确的写法是去掉引号，直接引用模板上下文里的$i18n.locale：

<td>{{ $d(new Date(date), 'short', $i18n.locale) }}</td>

模板里已经默认绑定了组件的上下文，所以不需要加this.，直接用$i18n.locale就可以获取当前设置的语言区域。

2. 自动获取用户浏览器语言初始化Locale #

要实现完全自动，你还需要在Vue I18n初始化时，读取用户浏览器的默认语言，并匹配你已有的本地化文件：

// 假设你的本地化文件是locales/index.js
import { createI18n } from 'vue-i18n'
import messages from './locales'

// 获取浏览器的默认语言（转成小写，匹配你的key格式）
const browserLocale = navigator.language.toLowerCase()
// 列出你支持的所有locale
const availableLocales = Object.keys(messages)
// 优先用浏览器语言，没有匹配的就回退到默认（比如'en-us'）
const initialLocale = availableLocales.includes(browserLocale) ? browserLocale : 'en-us'

const i18n = createI18n({
  locale: initialLocale,
  fallbackLocale: 'en-us', // 兜底语言
  messages
})

export default i18n

这样用户打开页面时，就会自动加载对应的语言配置，不用手动指定。

3. 其他硬编码场景的替换 #

对于你提到的类似'ja-JP'的硬编码场景，只需要做同样的替换：

• 在模板里：把'ja-JP'换成$i18n.locale
• 在组件脚本里：换成this.$i18n.locale（比如在methods或computed里使用时）

额外补充：支持手动切换语言 #

如果后续需要添加语言切换功能，只需要修改$i18n.locale的值即可，所有使用$i18n.locale的地方都会自动更新，完全不用改动之前的硬编码部分。比如：

<button @click="$i18n.locale = 'fr-ca'">切换为加拿大法语</button>
<button @click="$i18n.locale = 'en-us'">切换为美式英语</button>

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