https://github.com/intlify/vue-i18n-next

安装

  1. yarn add vue-i18n
  3. // 或者

src 下添加 lang 文件夹

image.png

zh_CN.ts，项目简单的话每种语言的文本都放在一个文件即可，项目比较复杂可以考虑每种语言一个文件夹，下面再划分模块。

  1. export default {
  2.   fields: {
  3.     title: '系统名称',
  4.     status: '状态',
  5.     remark: '备注'
  6.   },
  7.   actions: {
  8.     confirm: '确定',
  9.     cancel: '取消',
  10.     create: '新建',
  11.     upload: '上传',
  12.     return: '返回',
  13.     esc: '退出',
  14.     clone: '克隆',
  15.     remarks: '备注',
  16.     submit: '提交',
  17.     check: '查看',
  18.     download: '下载',
  19.     config: '配置',
  20.     delete: '删除',
  21.     all: '全部',
  22.     login: '登录',
  23.     next: '下一步',
  24.     prev: '上一步',
  25.     start: '开始',
  26.     pause: '暂停',
  27.     fail: '失败',
  28.     edit: '编辑'
  29.   },
  30.   status: {
  31.     fail: '失败',
  32.     waitingStart: '待开始',
  33.     process: '进行中',
  34.     finished: '已完成'
  35.   },
  36.   message: {
  37.     serverError: '服务器错误',
  38.     tokenInvalid: '登录凭证失效',
  39.     timeout: '请求超时',
  40.     clientError: '请求错误',
  41.     networkError: '网络错误',
  42.     required: '必填项。'
  43.   },
  45.   // 登录页
  46.   login: {
  47.     inputLoginAccount: '请输入登录账号',
  48.     inputLoginPwd: '请输入密码'
  49.   },
  51.   // 错误页面
  52.   error: {
  53.     notFound: '抱歉，您访问的页面不存在！ '
  54.   }
  55. }

en_US.ts

  1. export default {
  2.   fields: {},
  3.   actions: {
  4.     login: 'login'
  5.   },
  6.   status: {},
  7.   message: {},
  8.   login: {},
  9.   error: {}
  10. }

index.ts，导出一个挂载 i18n 的方法

  1. import type { App } from 'vue'
  2. import { createI18n } from 'vue-i18n'
  4. import zh_CN from './zh_CN'
  5. import en_US from './en_US'
  7. export const i18nInstance = createI18n({
  8.   locale: 'zh_CN',
  9.   legacy: false, // you must set `false`, to use Composition API
  10.   messages: {
  11.     zh_CN,
  12.     en_US
  13.   }
  14. })
  16. export default async function setupI18n(app: App<Element>) {
  17.   app.use(i18nInstance)
  18. }

main.ts

  1. // ...
  2. import setupI18n from './lang'
  3. // ...
  6. // ...
  7. // 多语言配置
  8. setupI18n(app)
  9. // ...

添加 hooks

vue-i18n 提供了一个钩子函数 useI18n()，暴露出 locale 属性用于切换语言，t 属性来使用多语言。

将 useI18n().t 重命名为 $t ，其他属性直接返回。

  1. import { useI18n } from 'vue-i18n'
  3. export const $t = (key: string) => key
  5. export default function () {
  6.   const i18n = useI18n()
  7.   return {
  8.     ...i18n,
  9.     $t: i18n.t
  10.   }
  11. }
  1. // ...
  2. import useI18n from './useI18n'
  3. // ...
  5. export {
  6.   // ...
  7.   useI18n
  8.   // ...
  9. }

使用

简单尝试

  1. <template>
  2.   <div :class="prefixCls">
  3.     <a-space>
  4.       <a-button type="primary">{{ $t('actions.login') }}</a-button>
  5.       <a-button type="primary" @click="setLocale">切换</a-button>
  6.     </a-space>
  7.   </div>
  8. </template>
  10. <script setup lang="ts">
  11. import { usePrefix, useI18n } from '@/hooks'
  13. const { prefixCls } = usePrefix('login')
  14. const { $t, locale } = useI18n()
  16. //  vue-i18n 提供了一个钩子函数 useI18n(),暴露出locale属性用于切换语言
  17. console.log('🚀 ~ file: Index.vue ~ line 14 ~ locale', locale)
  19. const setLocale = () => {
  20.   locale.value = locale.value == 'en_US' ? 'zh_CN' : 'en_US'
  21. }
  22. </script>
  24. <style scoped lang="less">
  25. @prefix-cls: ~'login';
  27. .@{prefix-cls} {
  28.   position: relative;
  29.   display: flex;
  30.   align-items: center;
  31.   justify-content: center;
  32.   width: 100vw;
  33.   height: 100vh;
  34. }
  35. </style>

image.png

image.png

存入 localStroge

把当前语言环境记录到localStorage中，用户刷新页面时根据 localStorage 渲染当前页面的文本

控制台报警问题

image.png

vite.config.ts 中 alias 配置添加：

  1. // 处理 vue-i18n 的控制台警告信息
  2. {
  3.   find: 'vue-i18n',
  4.   replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
  5. },