vue + vant国际化

vue项目做国际化需要使用vue-i18n

1. 安装
   npm i vue-i18n

2. 创建i18n实例
   lang.js

import { Locale } from 'vant'
import { createI18n } from 'vue-i18n/index'
import { getLanguage } from '@/untils/cookies.js'

import zhCN from 'vant/es/locale/lang/zh-CN'
import enUS from 'vant/es/locale/lang/en-US'

import zhCnLocale from '@/lang/zh-CN'
import enUsLocale from '@/lang/en-US'

const messages = {
  'zh-CN': {
    ...zhCN,
    ...zhCnLocale
  },
  'en-US': {
    ...enUS,
    ...enUsLocale
  }
}

export const getLocale = () => {
  const cookieLanguage = getLanguage()
  if (cookieLanguage) {
    // document.documentElement.lang = cookieLanguage
    return cookieLanguage
  }

  const language = navigator.language.toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale.toLowerCase()) > -1) {
      // document.documentElement.lang = locale
      return locale
    }
  }

  // Default language is english
  return 'en-US'
  // return 'zh-CN'
}

const CURRENT_LANG = getLocale()
Locale.use(CURRENT_LANG, messages[CURRENT_LANG])

const i18n = createI18n({
  legacy: false,
  locale: CURRENT_LANG,
  messages
})

export default i18n

3. 处理用户切换
   安装 npm i js-cookie

import Cookies from 'js-cookie'

const languageKey = 'language'

export const getLanguage = () => Cookies.get(languageKey)
export const setLanguage = (language) => Cookies.set(languageKey, language)

4. 使用
   在main.js中全局挂载useI18n

import i18n from '@/untils/lang'

import { useI18n } from 'vue-i18n/index'
app.config.globalProperties.useI18n = useI18n

app.use(i18n).mount('#app')

在组件中

<template>
	<div :attr="$t('字段')">{{$t('字段')}}</div>
</template>
<script setup>
	const {proxy} = getCurrentInstance()
	const {t} = proxy.useI18n()
	t('字段')
</script>

5. 页面更新
   手动切换语言后将local值设置成所需语言

const {local} = useI18n()
local.value = '切换语言'

需要注意的是页面更新不了可以结合computed属性来更新视图
如果涉及到接口请求返回不同语言直接使用页面刷新是最便捷的，但是缺点就是页面会闪动

window.location.reload()

最后可能会出现这样的报错：Uncaught SyntaxError: Not available in legacy mode
解决方法：

const i18n = createI18n({
  legacy: false,
  locale: CURRENT_LANG,
  messages
})

参考：
https://juejin.cn/post/7029609093539037197