npm install --save i18n-vue3-plugin可以直接传入语言环境对象
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')可以同步加载语言文件 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')可以同步加载语言文件 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
-- en
-- home.(json | js | ts)
-- about.(json | js | ts)
-- zh
-- home.(json | js | ts)
-- about.(json | js | ts)
...other languages可以查看仓库源码
模板中使用
<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')
}import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const status=$i18n.translateRef('home.edit')可以直接拷贝仓库 i18n文件夹源码自行扩展。