vue3项目中使用i18n国际化

1. 下载插件

通过传统的npm i去下载

npm i vue-i18n

2. 创建国际化文件

1. 在src目录同级下，创建一个locales文件夹，之后在locales文件夹下创建i18n.ts文件(名字可根据自己的需求去取), i18n的文件内容如下

import { createI18n } from 'vue-i18n' // 引入vue-i18n组件
import ch from './zh-cn/zh-cn'
import en from './en/en'

const i18n = createI18n({
  locale: 'en', // 设置语言环境
  fallbackLocale: 'en', // 没有中文的话默认英文
  globalInjection: true, // 如果不设置为true挂载到全局的话，{{$t(`message.name`)}}这种使用会报错
  messages: {
    // 配置语言
    'zh-cn': ch,
    en: en
  }
})

export default i18n

2.为了方便扩展后续代码以及需求，让项目的国际化更加的明确，我又在locales文件夹下创建了zh-cn文件夹以及en文件夹，之后在zh-cn文件夹以及en文件夹又分别创建了zh-cn.ts和en.ts文件，以及各个模块需要的分开的国际化文件

文件结构如下

en/en.ts

import login from './login'

export default {
  message: {
    ...login
  }
}

en/login.ts

export default {
  login: {
    btn: 'Login',
    tips: 'You can enter your account and password at will',
    userRequired: 'Please input userName!',
    passRequired: 'Please input password!'
  }
}

zh-ch/zh-cn.ts

import login from './login'

export default {
  message: {
    ...login
  }
}

zh-cn/login.ts

export default {
  login: {
    btn: '登录',
    tips: '你可以随意输入账号密码',
    userRequired: '请输入账号!',
    passRequired: '请输入密码!'
  }
}

多分出login.ts就是为了扩展，后续可以根据自己的业务需求再增加ts文件就可以了

3. 在vue template中使用

{{ $t(`message.account`) }}

4.在vue script中使用

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error(t('message.login.userRequired')))
  } else {
    callback()
  }
}

5. 切换语言模式

<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';">切换语言</el-button>

注：已引入elment-plus，如果没有引用，直接用button标签既可

6. 如有意见和建议，可留言，谢谢