首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3中使用i18n,this.$t报错

Vue3中使用i18n,this.$t报错问题及解决

2024-04-25 10:07:59 作者：死神萝莉

这篇文章主要介绍了Vue3中使用i18n,this.$t报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3使用i18n,this.$t报错

方案一

//需要把$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>

Vue3使用vue-i18n实现国际化

1、安装 vue-i18n 依赖包

npm i vue-i18n

2、创建文件存储翻译的语言

在src/i18n/en.js中

export default {
  login: 'login'
};

在src/i18n/zh.js中

export default {
  login: '登录'
};

3、注册i18n实例

在src/i18n/index.js中

import { createI18n } from "vue-i18n"; 
// 本地语言包
import zhLocal from "./zh";
import enLocal from "./en";
//注册i18n实例并引入语言文件
const i18n = createI18n({
  legacy: false,
  locale: 'zh',  
  fallbackLocale: "zh",
  silentTranslationWarn: true,
  messages: {
    zh:{...zhLocal} ,
    en:{...enLocal}
  },
});
export default i18n;

4、在main.js中引入i18实例

import i18n from "./i18n/index";
app.use(i18n).mount("#app");

5、在组件中使用

在模板中

<div>{{ $t('login') }}</div>

在js中

import { useI18n } from 'vue-i18n';
const { locale,t } = useI18n();
console.log(t('login')); // 登录
// 切换语言
const changeLanguage = val => {
  locale.value = val;
};

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。