Vue3.0 TS配置国际化vue-i18n

在新建VUE3+TS项目中，难免会进行国际化处理，下面详细安装使用步骤给你了~

1、安装vue-i18n

npm install vue-i18n --S

2、main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import i18n from '@/locales'
import config from '@/config/index'

const app = createApp(App)
// 挂载全局参数
app.config.globalProperties.$i18n = i18n.global
app.config.globalProperties.$CONFIG = config

app.use(createPinia())
app.use(router)
// size全局设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级
app.use(ElementPlus, {
  size: 'default',
  zIndex: 3000
})
app.use(i18n)

app.mount('#app')

3、App.vue配置

<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>

</template>
<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus'
import { getCurrentInstance, onMounted } from 'vue'
import zh_cn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const langComponent: any = {
  zh_CN: zh_cn,
  en: en
}
// 获取语言版本 
const lang = (window as any).localStorage.getItem('LANG')
const locale = langComponent[JSON.parse(lang)] // 获取到的lang-----'"zh_CN"'
const { proxy } = getCurrentInstance() as any
onMounted(() => {
  // proxy.$CONFIG.LANG 为全局设置的默认语言en
  proxy.$i18n.locale = JSON.parse(lang) || proxy.$CONFIG.LANG
})
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
</style>

4、添加src/locales/index.ts

import sysConfig from '@/config'
import { createI18n } from 'vue-i18n'
import elZhCn from 'element-plus/dist/locale/zh-cn.mjs'
import elEn from 'element-plus/dist/locale/en.mjs'
import elAr from 'element-plus/dist/locale/ar.mjs'
import zh_CN from './lang/zh-cn'
import en from './lang/en'
const messages = {
  zh_CN: {
    el: elZhCn.el,
    ...zh_CN
  },
  en: {
    el: elEn.el,
    ...en
  }
}

const i18n = createI18n({
  locale: (window as any).localStorage.getItem('LANG') || sysConfig.LANG,
  fallbackLocale: 'zh_CN',
  globalInjection: true,
  messages
})

export default i18n

5、添加locales/lang/en.ts

export default {
  common: {
    pleaseSelect: 'Please Select'
  }
}

6、添加locales/lang/zh-cn.ts

export default {
  common: {
    pleaseSelect: '请选择'
  }
}

7、vue页面使用

方法一：

<template>
	<div>{{t('common.pleaseEnter')}}</div>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
const { t } = getCurrentInstance()?.appContext.config.globalProperties.$i18n
</script>

方法二：

<template>
	<div>{{$t('common.pleaseEnter')}}</div>
</template>

<script lang="ts" setup>
</script>

8、ts文件中使用！！！

在ts文件中，使用 appContext 可能会报错，这是因为 TypeScript 不知道 appContext 的类型。
在 Vue3 中，$t 已经被移除了，需要使用新的全局 API i18n.global.t 来进行国际化处理。

下面为响应拦截器部分代码，主要记录如何使用i18n：

......
import i18n from '@/locales'

// 国际化
const { t } = i18n.global as any
  ...... 
  // 响应拦截器
  instance.interceptors.response.use(function (response) {
    return response.data
  },
  function (error) {
    if (error && error.response) {
      // 1.公共错误处理
      // 2.根据响应码具体处理
      switch (error.response.status) {
        case 401:
          router.push('/login')
          error.message = error.response.data.msg
          break
        case 500:
          error.message = t('request.500') // 服务器端出错
          break
        default:
          error.message = `${t('request.linkError')}${error.response.status}`
      }
    } else {
      // 超时处理
      if (JSON.stringify(error).includes('timeout')) {
        error.message = t('request.timeout')
      } else {
        error.message = t('request.linkServerError')
      }
    }
    ElMessage.error(error.message)
    return Promise.reject(error.response)
  }
  )

有疑问可留言，
如果帮助到你了，记得给个赞哦O(∩_∩)O哈哈。

~~