VUE3下js文件的国际化问题

最新推荐文章于 2025-04-10 14:20:47 发布

niuwq

最新推荐文章于 2025-04-10 14:20:47 发布

阅读量1.8k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/logsharp/article/details/126823279

版权

本文介绍了在Vue3项目中，如何在独立的JS文件中实现国际化。通过创建i18n实例并导出，在JS文件中引入并使用t函数。同时，对比了两种方法：直接引入i18n.js使用t函数（不支持实时语言切换）和在组件中使用eval转换字符串实现（支持实时切换）。详细阐述了两种方法的实现过程和优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue@3.2.31和vue-i18n@9.2.2实现国际化，在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使用起来麻烦，但可以实现实时切换语言。