1. 安装
npm install vue-i18n@9
2. 配置
2.1 src下新建locales文件夹,locales文件下创建index.ts文件
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import zh_j from './language/zh_j' // 中文简体语言包
import zh_f from './language/zh_f' // 中文繁体语言包
// 实例化I18n
const i18n = createI18n({
legacy: false,
locale: "zh_j", // 初始化配置语言
messages: {
zh_j,
zh_f
}
})
export default i18n
这里语言包主要简体与繁体的切换,需要其他语言的,可以复制language文件夹中的某一个文件重命名,然后重新在index.ts导入,在messages中新增一个配置
在locales中新增文件language,在language中分别新增zh_j.ts和zh_f.
zh_j.ts
export default {
message: {
Home: '首页',
About: '关于'
}
}
zh_f.ts
export default {
message: {
Home: '首頁',
About: '關於'
}
}
完成后再mian.ts中引入使用
//国际化vue-i18n语言包
import i18n from './locales/index' // 引入
createApp(App).use(i18n).mount('#app')
在对应页面中使用
<template>
<div>{{$t('message.Home')}}---{{$t('message.About')}}</div>
<div @click="changeLanguage('zh_j')">中文</div>
<div @click="changeLanguage('zh_f')">繁体</div>
</template>
<script lang="ts" setup>
//语言切换
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
function changeLanguage(type: string) {
locale.value = type;
}
</script>
在对应的ts中使用
import i18n from '@/locales/index' // 引入
const { t } = i18n.global
export const nav = [
{
title: t('message.Home'),
icon: 'power',
children: [
{
title: t('message.About'),
path: 'account-list'
},
]
},
]
完成!!!!!
在编译过程中可能会报$t不存在,在根目录中找到shims-vue.d.ts,没有就新建一个出来,加上以下配置即可
export {};
declare module "vue" {
interface ComponentCustomProperties {
$t: any;
}
}