Vue3中使用i18n，this.$t报错

死神萝莉

已于 2024-04-24 11:46:50 修改

阅读量3.3k

点赞数 4

分类专栏：疑难杂症 vue 文章标签： vue.js 前端 javascript

于 2024-04-24 10:51:58 首次发布

本文链接：https://blog.csdn.net/u010741500/article/details/138152143

版权

疑难杂症同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了在Vue项目中实现国际化(i18n)的三种方法：方案一是通过全局挂载$t；方案二是使用vue-i18n并设置`legacy`为`false`；方案三是利用选项式写法直接在组件中使用`this.$t`。

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

方案一

//需要把$t手动挂载到全局

//main.js
app.config.globalProperties.$t = i18n.global.t

//需要使用的时候在组件里引用
import { getCurrentInstance  } from 'vue'
const _this = getCurrentInstance().appContext.config.globalProperties
console.log('$i18n',_this.$t('欢迎'))

方案二

legacy设置为false

//main.js
const i18n = createI18n({
  locale: localStorage.getItem('i18n-lang'),
  fallbackLocale: 'zh',
  messages: {
    en,
    zh
  },
  legacy: false
})

//组件中先引用再使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log('$i18n',t("欢迎"))

方案三

直接像vue2一样，使用选项式写法，可以直接使用

//使用vue选项式写法，可以直接使用this.$t
<script>
export default {
  methods:{
    change(){
      console.log(this.$t('欢迎'))
    }
  },
  mounted() {
    this.change()
  }
}
</script>