vue3 i18n国际化，普通js，ts文件中的设置方法

<template>
  <div :class="['wrapper-app', platform.data.isPc ? '' : 'wrapper-app-bg']">
    ...
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>
    ...
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted } from 'vue'
...
import { SYS_LANG } from '@/lang'
import { ElConfigProvider } from 'element-plus'

//elementplus中的国际化配置，若不加则element默认为中文（实际则在main.ts中设置全局了）
import zh_cn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const { proxy } = getCurrentInstance() as any

const langComponent: any = {
  zh_CN: zh_cn,//一定要用zh_CN,因为你后续可能有中文简体，而浏览器默认给的也是这种方式，除非你就只有中文和英文国际化配置。要不就一顿魔改
  en: en,
}
const lang = (window as any).localStorage.getItem('lang')//默认取本地的语言，若没有，则默认取中文
const locale = ref(langComponent[lang] || SYS_LANG) // 获取到的lang-----'"zh_CN"'



onMounted(() => {
...

// proxy.$CONFIG.LANG 为全局设置的默认语言en
proxy.$i18n.locale = lang || SYS_LANG

...
})
</script>

<style scoped lang="scss">

</style>

项目环境：vue3 + ts + element plus + i18n

说明：请注意，该方法无法一键动态切换，必须要重新刷新页面才能生效，当然在普通文件中，如ts\js文件中的i18n国际化配置才需要刷新页面，如果你的项目只是在VUE文件中做国际化，那么可以忽略刷新页面问题。

i18n版本

vue3 i18n国际化，普通js，ts文件中的设置方法-LMLPHP

i18n实例

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 zh_CN from './zh_cn' //中文
import EN from './en' //英文

//语言配置信息
const message: any = {
  zh_CN: {
    //中文简体
    el: elZhCn,
    ...zh_CN,
  },

  en: {
    //英文
    el: elEn,
    ...EN,
  },
}

//系统语言（全局默认语言），取浏览器语言
export const SYS_LANG: any = getSysLang()

//获取当前语言
function getSysLang() {
  let sysLang: any = (window as any).navigator.language || 'zh_CN'
  sysLang = sysLang.replace('-', '_')
  return sysLang
}

//创建i18n实例
const i18n = createI18n({
  locale: (window as any).localStorage.getItem('lang') || SYS_LANG, // 设置当前语言类型，若本地没存，则设置默认语言
  fallbackLocale: 'zh_CN', //如果出错，则默认的语言：中文简体

  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: message,

  silentTranslationWarn: true, // 去掉警告
  missingWarn: false,
  silentFallbackWarn: true, //抑制警告
})

export default i18n

在main.ts中引入i18n，以下代码仅做参考

import './assets/css/reset.css'

import { createApp } from 'vue'
import pinia from './stores'

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import '@/assets/iconfont/iconfont.css'

...

import i18n from './lang/index.js'//引入I18N

export const app = createApp(App)

//全局变量设置
app.config.globalProperties.$i18n = i18n.global//可以不设置此步


app.use(i18n) //app.use()国际化

...
app.mount('#app')

在app.vue中新增i18n

<template>
  <div :class="['wrapper-app', platform.data.isPc ? '' : 'wrapper-app-bg']">
    ...下方是用的element的标签
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>


  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted } from 'vue'

import { SYS_LANG } from '@/lang'
import { ElConfigProvider } from 'element-plus'
import zh_cn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const { proxy } = getCurrentInstance() as any

const langComponent: any = {
  zh_CN: zh_cn,
  en: en,
}
const lang = (window as any).localStorage.getItem('lang')
const locale = ref(langComponent[lang] || SYS_LANG) // 获取到的lang-----'"zh_CN"'



onMounted(() => {
...

  // proxy.$CONFIG.LANG 为全局设置的默认语言en
  proxy.$i18n.locale = lang || SYS_LANG


})
</script>

<style scoped lang="scss">

</style>

vue3 ts i18n用法

1 在vue3+ts中，如.<标签>{{ $t('login.title') }}</标签>

<div class="title">{{ $t('login.title') }}</div>

2 在<script setup>...</script>中

2.1 普通用法（最常见的）

a.引入：vue-i18n（请注意：是引入的vue-i18，并且通过useI18n解构），并且解构{t}。
b.使用：直接使用t("")方法，如：t('login.form.fields.userName')

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法

// 随便定义一个变量
let message:string = t('login.form.fields.userName')

...
<script>

2.2 在普通.ts文件，或者.js文件中使用

在普通文件中，你就不能使用上述方法引入了。你必须引入本地文件中的i18n。具体如下：

//common.ts文件中。

...
import i18n from '@/lang/index' //我本地的i18n实例
let _t: any = i18n.global


//公共配置
export let common: any = {
    site: {
       title: _t.t('system.global.companyName')//站点名称
    },

}
...

vue3 i18n国际化，普通js，ts文件中的设置方法-LMLPHP

这个时候，你的国际化就设置完毕了。

但是你一切换的时候，必须要重新刷下页面才行，否则普通js\ts中的内容无法切换，我尝试了很多种方法都不行。如果有大神知道为什么，可以讨论下哈！

小三金

vue3 i18n国际化，普通js，ts文件中的设置方法

vue3 ts i18n用法