vue-i18n+vscode+vue 多语言使用

1.vue2 + vue-i18n + i18n Ally(vscode 插件）

"vue-i18n": "^8.28.2"

目录结构

locales/index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCN from './zh-CN/index.js';
import en from './en/index.js';
import zh_HK from './zh_HK/index.js';
import ja_JP from './ja_JP/index.js';

import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import enLocale from 'element-ui/lib/locale/lang/en';
import jaLocale from 'element-ui/lib/locale/lang/ja';

Vue.use(VueI18n);

// 注意：属性名 是不同语言的标识，用于后续切换时传递使用。
const messages = {
    'zh_CN': {
        ...zhCN,
        ...zhLocale
    },
    'en_US': {
        ...en,
        ...enLocale
    },
    'zh_HK': {
        ...zh_HK,
        ...zhTWLocale
    },
    'ja_JP': {
        ...ja_JP,
        ...jaLocale,
    }
};
let shzxlang = localStorage.getItem('lang') || 'zh_CN';
if (shzxlang) {
    let keys = Object.keys(messages);
    if (!keys.includes(shzxlang)) {
        shzxlang = 'zh_CN';
    }
    Vue.prototype.$stylelang = (shzxlang=='en_GB'||shzxlang=='en_US')?'max':'normal';
}

const i18n = new VueI18n({
    // 设置默认语言为中文
    locale: shzxlang,
    messages: messages
});

export default i18n;

main.js

import i18n from './locales/index'
new Vue({
      router,
      i18n,
      render: (h) => h(App),
    }).$mount('#app');

i18n Ally的vscode相关配置,详细配置使用可查看VS Code-i18n Ally国际化插件 配置百度翻译_i18n-ally配置-CSDN博客

settings.json

{
    // 插件将以何种语言作为基准来进行翻译相关的操作，如果你正在开发一个多语言应用，并且原始文案是用英语编写的，你可以将`sourceLanguage`设置为`en`（代表英语）。这样，插件就知道在提取文案进行翻译或者在代码中关联不同语言的文案时，以英语文案为原始参考。
    "i18n-ally.sourceLanguage": "zh-CN",
    // 指定语言文件存储的位置，后续自动翻译的文案也会存到这个位置；数组的形式允许添加多个
    "i18n-ally.localesPaths": ["src/locales"],
    // 语言文件内部的数据结构，flat({"a.b.c": "..."}) or nested({"a": {"b": {"c": "..."}}}
    "i18n-ally.keystyle": "nested",
    // 设置当前显示的主体语言: zh-CN/en/zh-TW/...
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.enabledParsers": ["ts", "json","js"], // 解析的文件后缀
    // 使用空间命名
    "i18n-ally.namespace": true,
    "i18n-ally.pathMatcher": "{locale}/{namespace}.json",
    "i18n-ally.extract.autoDetect": false
}

设置完成后 vscode项目文件展示

项目中的一些特殊处理

》单独的js使用

》使用this.options.data一定用call(this)否则，如果data中有用到t会报错

Object.assign(this.data.formInline, this.options.data.call(this).formInline);

2.vue3 + vue-i18n + i18n Ally(vscode 插件）

"vue-i18n": "^12.0.0-alpha.2", "vue": "^3.5.13",

locales/index.ts

// import Vue from 'vue';
import { createI18n } from 'vue-i18n';
import zhCN from './zh-CN/index.ts';
import en from './en/index.ts';
import zh_HK from './zh_HK/index.ts';
import ja_JP from './ja_JP/index.ts';
import enLocale from 'vant/es/locale/lang/en-US';
import zhLocale from 'vant/es/locale/lang/zh-CN';
// Vue.use(VueI18n);
import { Locale } from 'vant';
// 注意：属性名 是不同语言的标识，用于后续切换时传递使用。
const messages = {
    'zh_CN': zhCN,
    'en_US': en,
    'zh_HK': zh_HK,
    'ja_JP': ja_JP
};

let lang = localStorage.getItem('lang') || 'zh_CN';
if (lang) {
    let keys = Object.keys(messages);
    if (!keys.includes(lang)) {
        lang = 'zh_CN';
    }
}
let vantLocale = {
    'zh_CN': {
        key:'zh-CN',
        value:zhLocale
    },
    'en_US': {
        key:'en-US',
        value:enLocale,
    }
};
Locale.use(vantLocale[lang]?.key||'zh_CN', vantLocale[lang]?.value||zhLocale);

const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: lang,
    messages,
    fallbackLocale: 'zh_CN'
});
export default i18n;

main.ts

import { createApp } from 'vue';
import './style.less';
import App from './App.vue';
import 'vant/lib/index.css';
import "vant/es/toast/style"//修复样式问题
import router from '@/router';
import pinia from '@/store';
import titleBar from '@/pages/components/titleBar/index.vue'
import i18n from './locales/index'

// import VConsole from 'vconsole'; // 引入vconsole
// 注册全局组件
createApp(App)
    .use(i18n)
    .use(router)
    .use(pinia)
    .component('titleBar', titleBar)
    .mount('#app')

设置完成后 vscode项目文件展示

const t = getCurrentInstance().proxy.t;//多语言

项目中的一些特殊处理

defineProps中使用t

单独的ts文件使用

import i18n from '@/locales/index';
const { t } = i18n.global;

补充说明：项目的翻译可以由公司的统一工具翻译，也可使用i18n Ally插件的翻译功能