Vue项目中引入translate.js实现国际化自动翻译功能实例

npm i i18n-jsautotranslate

import translate from 'i18n-jsautotranslate';

// 设置使用 v2.x 版本
translate.setUseVersion2();

// 是否显示语言切换栏
translate.selectLanguageTag.show = false;

// 监控页面动态渲染的文本进行自动翻译
translate.listener.start();

// Vue 2
Vue.prototype.$translate = translate;

// Vue 3
app.config.globalProperties.$translate = translate;

// 切换语言并翻译
function languageAuto() {
  const language = this.$translate.getLanguage();
  if (language === "zh") {
    this.$translate.changeLanguage("english");
  } else {
    this.$translate.changeLanguage("chinese_simplified");
  }
  this.$translate.execute(); // 执行翻译
}

import { ref, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const translate = instance.appContext.config.globalProperties.$translate;

const language = ref("en");

function languageAuto() {
  language.value === "zh" ? (language.value = "en") : (language.value = "zh");
  localStorage.setItem("language", JSON.stringify({ language: language.value }));

  if (language.value === "zh") {
    translate.changeLanguage("chinese_simplified");
  } else {
    translate.changeLanguage("english");
  }
  translate.execute(); // 执行翻译
}