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插件的翻译功能

相关推荐
Mintopia7 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy7 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia7 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
新手小黑吖10 分钟前
vscode开发微信小程序
vscode·微信小程序
陌小路13 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213820 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36529 分钟前
antd 组件部分API使用方法
前端
BillKu32 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python