Install

npm install --save i18n-vue3-plugin

Basic Use

可以直接传入语言环境对象

import { createApp } from 'vue'
import App from './App.vue'
import {i18nVue3Plugin} from 'i18n-vue3-plugin';

createApp(App).use(i18nVue3Plugin, {
    locale:{
        zh:{
            home:{
                edit:'编辑'
            },
            hello:'你好, { name }',
            test:'测试'
        },
        en:{
            home:{
                edit:'edit'
            },
            hello:'hello, {name}',
            test:'test'
        }
    },
    lang:'en'
}).mount('#app')

Synchronous loading of language files

可以同步加载语言文件 vite 工程下可以借助import.meta.glob快捷扫描语言文件夹

createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:false,
    modules:import.meta.glob('./langs/**/*',{eager:true})
}).mount('#app')

webpack可以借助require.context

createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:false,
    modules:require.context('./langs',true)
}).mount('#app')

Asynchronous loading of language files

可以同步加载语言文件 vite 工程下可以借助import.meta.glob异步加载语言文件夹

createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:true,
    modules:import.meta.glob('./langs/**/*')
}).mount('#app')

其他环境可以如下使用

createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:true,
    modules:{
        './langs/en/index.js':()=>import('./langs/en/index.js'),
        './langs/en/home.js':()=>import('./langs/en/home.js')
        ...
    }
}).mount('#app')

langs文件夹内容

-- langs
    -- en
        -- home.(json | js | ts)
        -- about.(json | js | ts)
    -- zh
        -- home.(json | js | ts)
        -- about.(json | js | ts)
    ...other languages

可以查看仓库源码

Vue中使用方式

模板中使用

    <p>{{$i18n.translate('home.edit')}}</p>
    <p>{{ $i18n.translate('index.hello',{name:'李强'}) }}</p>

切换语言

import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const changeLang=()=>{
  $i18n.changeLang($i18n.getLang()==='zh'?'en':'zh')
}

支持派生ref

import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const status=$i18n.translateRef('home.edit')

自定义扩展

可以直接拷贝仓库 i18n文件夹源码自行扩展。