vue-i18n 语言国际化

Vue3

1.安装vue-i18n

npm install vue-i18n@next -S

2.注册到Vue

lang/index.ts

import { createI18n } from 'vue-i18n';

import zh from './zh.json';
import en from './en.json';

// 创建i18n实例
const i18n: any = createI18n({
  legacy: false, // 使用Composition API，这里必须设置为false
  globalInjection: true, // 全局注入 $t 函数
  global: true,
  locale: getLocal(),
  fallbackLocale: 'zh', // 默认语言
  messages: { zh, en }
});

/**
 * 获取本地语言标识
 * @returns {string}
 */
function getLocal() {
  const locale = localStorage.getItem('lang');
  // 如果缓存中存在，则直接返回
  if (locale) {
    return locale;
  } else {
    // 否则使用默认
    const defaultLocale = 'zh';
    // 设置缓存
    localStorage.setItem('lang', defaultLocale);
    return defaultLocale;
  }
}

export default i18n;

注：如果导入json提示错误，在shims-vue.d.ts声明文件中加入以下内容
declare module '*.json' {
const value: any;
export default value;
}

在main.ts中引入lang/index.ts

import { createApp } from 'vue';
import App from './App.vue';
import i18n from '@/lang';
const app = createApp(App);
app.use(i18n).mount('#app');

3.使用方法

vue3使用

<template>
    <div> {{ $t('name') }} </div>
</template>

<script>
import i18n from '@/lang';
const { locale, t } = i18n.global;

export default defineComponent({
  setup() {
    console.log(locale.value);
    console.log(t('name'));
    console.log(this.$i18n.locale);
    console.log(this.$t('name'));
  }
})
</script>

切换语言

<template>
  <div>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
    <button @click="toggleLang">Toggle Language</button>
    <p>{{ $t('name') }}</p>
  </div>
</template>

<!-- 组合式 -->
<script setup>
import i18n from '@/lang';
const { locale, t } = i18n.global;

const changeLang = (val) => {
  locale.value = val;
  localStorage.setItem("lang", val);
};

const toggleLanguage = () => {
  let val = locale.value === 'en' ? 'zh' : 'en';
  locale.value = val;
  localStorage.setItem("lang", val);
};
</script>

<!-- 选项式
<script >
import { defineComponent } from 'vue';
export default defineComponent({
  watch: {
    '$i18n.locale': {
      handler(lang) {
        console.log(lang);
        console.log(this.$i18n);
        document.title = this.$t('common.add');
      },
      immediate: true
    }
  },
  methods: {
    toggleLang() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
      console.log(this.$t('name'));
    }
  }
});
</script>
-->

开发Vue3 自定义i18n插件

plugins/i18n.js

import { reactive } from 'vue';
import messages from '../languages';
import elm_zh from 'element-plus/es/locale/lang/zh-cn';
import elm_en from 'element-plus/es/locale/lang/en';

// 获取本地语言标识
const getLocal = () => {
  const locale = window.localStorage.getItem('lang');
  // 如果缓存中存在，则直接返回
  if (locale) {
    return locale;
  } else {
    // 否则使用默认
    const defaultLocale = 'zh';
    // 设置缓存
    window.localStorage.setItem('lang', defaultLocale);
    return defaultLocale;
  }
};

// 创建翻译器对象
const createTranslator = (messages) => {
  const state = reactive({
    locale: getLocal(), // 默认语言
    messages: {
      zh: { ...messages.zh, ...elm_zh },
      en: { ...messages.en, ...elm_en },
    },
  });

  const translate = (key) => {
    const message = state.messages[state.locale];
    const keys = key.split('.');
    return keys.reduce((o, i) => {
      if (o) {
        return o[i];
      }
    }, message);
  };

  return {
    state,
    translate,
  };
};

// 定义插件
const i18nPlugin = {
  install(app) {
    const translator = createTranslator(messages);

    // 注入 $i18n 对象
    app.provide('$i18n', translator);

    // 在应用程序实例上暴露 $t 方法
    app.config.globalProperties.$translate = (key) => {
      return translator.translate(key);
    };
  },
};

export default i18nPlugin;

main.js

import i18nPlugin from './plugins/i18n';
app.use(i18nPlugin);

Vue2

1.安装vue-i18n

npm install vue-i18n -S

2.注册到Vue

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

// 准备翻译的语言环境信息
const locales = {
    zh: {
        name: '你好，世界'
    },
    en: {
        name: 'hello world'
    }
};
//或者从外部json文件导入
//const zh = require('./lang/zh.json');
//const en = require('./lang/en.json');
//const locales = { zh, en };


const i18n = new VueI18n({
    locale: 'zh',
    messages: locales
});

// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')

3.使用方法

<template>
    <div> {{ $t('name') }} </div>
</template>

<script>
export default ({
 data() {
 	return { }
 },
 computed: {
   getLocalName() {
   	 return this.$t('name')
   } 
 }
})
</script>

切换语言

<template>
  <div>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
    <button @click="toggleLang">Toggle Language</button>
    <p>{{ $t('name') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang(locale) {
      this.$i18n.locale = locale;
    },
    toggleLang() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    }
  }
};
</script>

其他

在代码中可实时显示翻译结果的插件
Vue3中，国际化插件vue-i18n使用记录，配合VSCode自动化翻译插件i18n Ally