Vite中vue-i18n实现国际化插件

最新推荐文章于 2025-03-18 17:10:14 发布

欣~语

最新推荐文章于 2025-03-18 17:10:14 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_17395607/article/details/128918079

版权

该文章详细介绍了如何在Vue项目中使用vue-i18n进行国际化设置。首先通过npm安装，然后在src下创建locales文件夹，导入并实例化i18n。接着，创建中文简体和繁体的语言包，并在main.ts中引入使用。在模板和脚本中展示和切换语言功能。最后，处理$t不存在的类型错误，通过shims-vue.d.ts进行声明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }
}