vue3和ts使用i18n实现国际化与动态切换语言

i18n官网：Installation | Vue I18n

vue项目里多语言工具一直用的vue-i18n。
以前用的 vue2，也没啥大问题，就是配置好之后用t(“你的属性名”)就行，现在用vue3其实本来也没太大变化。

安装

npm install vue-i18n@next

或者

yarn add vue-i18n@next

或者

pnpm install vue-i18n@next

配置到项目中

在 src 目录下新建 lang 文件夹，并包含index.ts , lang / en.ts , lang / zh.ts(做中英文切换)

各个文件内容如下

en.ts:

export default {
    login: {
        login: 'login',
        userName: 'userName',
        password: 'password',
    },
    captcha: 'Captcha',
    forgetPassword: 'Forget Password?',
    loginTip: 'The login result is random. Just fill in the captcha',
    editpassword: 'Edit Password',
    logout: 'Logout',
    errMsg: {
        inputRequired: 'Please Input {cont}',
        selectRequired: 'Please Select {cont}',
    },
}

zh.ts:

export default {
    login: {
        login: '登录',
        userName: '用户名',
        password: '密码',
    },
    captcha: '验证码',
    forgetPassword: '忘记密码了？',
    loginTip: '当前登录结果随机。验证码随便填',
    editpassword: '修改密码',
    logout: '退出登录',
    errMsg: {
        inputRequired: '请输入{cont}',
        selectRequired: '请选择{cont}',
    },
}

index.ts:

// index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const messages = {
    en,
    zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
    locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
    fallbackLocale: 'zh', // 设置备用语言
    messages,
    legacy: false,
    globalInjection:true,
})

export default i18n

最后在main.ts引入就好了:

import i18n from './lang/index'
import { createApp } from "vue";


// 国际化: 其他部分省略
const app = createApp(App)
app.use(i18n)

我的main.ts文件里面有很多东西，不适合你拷贝，按照你的需求自己添加就好 

使用

1.在<template>中使用

要用到一个$t()的方法，或者使用v-t也行

 <div>
   {
   
   { $t('login.userName') }}
 </div>
 <div v-t="'login.password'"></div>

关于$t()还有很多用法，可以动态传参等，具体还是去官网看：Composition API | Vue I18n

2.在setup中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>

还有其他的就不展开了

3.切换语言

vue-i18n提供了一个全局变量locale，直接修改即可

<template>
    <div class="menu">
        <div  @click="changeLang('en')">English</div>
        <div  @click="changeLang('zh')">中文</div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const changeLang = (lang: string) => {
  locale.value = lang
  localStorage.setItem('lang', lang)
}
</script>