VUE3下js文件的国际化问题

使用[email protected]和[email protected]实现国际化，在vue组件(.vue文件)中可以正常使用，在单独的js文件中如何进行国际化呢？找到两种方法。
首先，一般实现国际化都会写一个如下这个i18n.js文件：

import { createI18n } from 'vue-i18n'
import enUS from '@/assets/locale/en-us'
import zhCN from '@/assets/locale/zh-cn'

const messages = {
  'en-US': enUS,
  'zh-CN': zhCN
}
const language = (navigator.language || 'en-US') // 这是获取浏览器的语言
const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || language, // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'en-US', // 设置备用语言
  messages, 
})

export default i18n

方法1

在需要国际化的js文件中引入上面这个i18n.js文件，再定义一下t，就可以正常使用t函数了：

import i18n from '@/utils/i18n'
const t = i18n.global.t

方法2

把js文件中跟国际化相关的内容定义成字符串，在vue组件中要用的时候，再使用eval转化成对象使用。如：

const jobType = `({
  file: t('common.file'),
  data: t('common.data')
})`

在vue组件中使用时：

import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const types = ref(eval(jobType))

两种方法比较

在我的项目中，

• 方法1使用起来简单，但是不能实时切换语言；
• 方法2使用起来麻烦，但可以实现实时切换语言。