vue3多语言国际化i18n
安装 npm install vue-i18n@next
如果需要路由控制npm install vue-router@4
先在src目录下创建locales目录存放翻译文件
可以使用子对象，用来区分不同vue组件或某个栏目的内容，例如我写了三条翻译，分别在App.vue,Index.vue,Ceshi.vue中使用。
crc/locales/en.json:
{
"app": {
"hello": "hello world"
},
"index": {
"h1": "this index"
},
"ceshi": {
"h1": "this ceshi"
}
}
再创建一个中文翻译src/locales/zh-Hans.json:
{
"app": {
"hello": "你好，世界"
},
"index": {
"h1": "这是首页"
},
"ceshi": {
"h1": "这是测试"
}
}
然后创建一个i18n.js:
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import zh_Hans from './locales/zh-Hans.json';
//实例化i18n
const i18n = createI18n({
legacy: false,
globalInjection: true, // 全局注入
locale: 'en', // 使用语言,这里无效，因为在路由守卫中使用url控制，要改变语言就是改变这里
messages: {
en,
'zh-Hans': zh_Hans, //因为js不能使用-符号，所以用别名引入
}
});
//导出实例
export default i18n;
然后我希望使用路由控制语言，创建router.js:
import { createRouter,createWebHistory } from "vue-router";
import i18n from './i18n'; //引入i18n.js
import Index from "./Index.vue"; //这是导入的两个页面
import Ceshi from "./Ceshi.vue"; //这是导入的两个页面
const routes = [ //指定路由
{path:"/:locale",component:Index}, //中间的:locale就是语言变量
{path:"/:locale/ceshi",component:Ceshi},
]
const router = createRouter({ //创建路由
history: createWebHistory(), //路由模式
routes, //路由，由之前的数组变量作为参数
})
//路由守卫，获取url中的locale参数，然后设置i18n的locale
router.beforeEach((to, from, next) => {
//得到路由的locale参数
const locale = to.params.locale;
//如果不是数组中的语言则跳转到默认语言url
if (!['en', 'zh-Hans'].includes(locale)) return next('/en');
//如果locale不是url指定的语言则修正
if (i18n.global.locale.value !== locale) {
i18n.global.locale.value = locale
}
document.documentElement.lang = locale; // 更改<html lang=>的值,方便浏览器识别语言
next(); //继续后面的操作
});
export default router; //导出router
在main.js中使用这两个实例:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'; //引入router.js
import i18n from './i18n'; //引入i18n.js
const app = createApp(App);
app.use(router); //使用router
app.use(i18n); //使用i18n
app.mount('#app');
接下来使用翻译的方法:
App.vue
<template>
<div>
<h1>{{ $t('app.hello') }}</h1>
<router-view></router-view>
</div>
</template>
{{ $t('app.hello') }} 就是访问翻译文件中的app的子对象hello，这样它会自动翻译成指定的文字