Vue3+ts 配置i18n国际化，解决i18n警告

Vue3全局配置国际化i18n，封装hook，解决i18n警告

1. 安装包 

yarn add vue-i18n@next

2. 基础步骤

•  导入创建i18n方法

// locale/index.ts
import { createI18n } from "vue-i18n";

•  创建i18n实例对象，导出

// locale/index.ts
// 导入全局中英文配置对象
import en from './en-US'
import zh from './zh-CN'

// 默认读取本地存储语言设置
const defaultLocale = localStorage.getItem('locale') || 'en-US'

const i18n = createI18n({
  locale: defaultLocale,// 默认语言
  fallbackLocale: 'en-US',// 不存在默认则为英文
  allowComposition: true,// 允许组合式api
  messages: {
    'en-US': en, // 标识:配置对象
    'zh-CN': zh
  },
})
export default i18n

• 在main.ts中导入并挂载

// main.ts
import { createApp } from 'vue' // 导入创建App实例
import App from './App.vue' // 导入App组件
import i18n from './locale' //引入国际化
const app = createApp(App) // 创建App实例 传入渲染组件
app.use(i18n)// 挂载国际化配置

3. 其他国际化配置对象引入全局中英文配置文件

• 英文配置对象

// locale/en-US.ts
import localeLogin from '@/views/login/locale/en-US'
export default {
  "navbar.action.locale": 'Switch to Englisth',
  ...localeLogin
}

•  中文配置对象

// locale/zh-CN.ts
import localeLogin from '@/views/login/locale/zh-CN'
export default {
  "navbar.action.locale": '切换成中文',
  ...localeLogin
}

4. 封装国际化处理hook

// hook/useLocale.ts
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { Message } from '@arco-design/web-vue'
export default function useLocale() {
  const i18n = useI18n();//实例化i18n
  const currentLocale = computed(() => {
    return i18n.locale.value // 固定写法 获取当前语言设置
  })
  // 切换语言
  const changeLocale = (value: string) => {
    i18n.locale.value = value;//赋值切换语言
    localStorage.setItem('locale', value);//修改本地存储
    Message.success(i18n.t('navbar.action.locale'));//提示信息
  }
  return {
    i18n,
    currentLocale,
    changeLocale
  }
}

5. 解决i18n警告

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: [
      {
        find: 'vue-i18n',
        replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
      },
    ]
  },
})

6. 使用方法

<script setup lang="ts">
import useLocale from '@/hooks/useLocale' // 国际化hook
const {
  i18n: { t }, // 解构实例用具t 访问语言变量
  currentLocale, //当前国际化
  changeLocale, // 修改国际化
} = useLocale()
// 切换语言
const switchLang = () => {
  if (currentLocale.value == 'zh-CN') {
    changeLocale('en-US')
  } else {
    changeLocale('zh-CN')
  }
}
</script>
<template>
   <button @click="switchLang">
        {{ t('login-switch') }}
   </button>
</template>

7. 总结

• 通过封装好的hook可以很便捷的访问修改语言配置
• 合并引入所有的国际化配置