vue3+vite2+vueI18n配置国际化

别人只会教你理论,而我只会教你实践
我的版本:

"vite": "^2.6.4"
"vue-i18n": "^9.2.0-beta.15"
"vue": "^3.2.16"
"vue-tsc": "^0.3.0"

⚠版本不同可能会造成某些写法或配置不(兼容/生效)
目录结构:

-src
|-locales
    |-en-US.ts
    |-ko-KR.ts
    |-zh-CN.ts
    |-index.ts

文件内容

// zh-CN.ts
export default {
    home: '首页'
}

//index.ts
import { createI18n } from 'vue-i18n'        //引入vue-i18n组件
//引入同级目录下文件
const modules = import.meta.globEager('./*')

//假设你还有其他目录下的语言文件 它的路径是 src/home/locales/en-US.ts
//那么你就可以 使用 :lower:（小写） :upper:（大写） 来引入文件
const viewModules = import.meta.globEager('../**/locales/[[:lower:]][[:lower:]]-[[:upper:]][[:upper:]].ts')

function getLangAll(): any{
  let message:any = {}
  getLangFiles(modules,message)
  getLangFiles(viewModules,message)
  return message
}
/**
 * 获取所有语言文件
 * @param {Object} mList
 */
function getLangFiles(mList:any,msg:any){
  for(let path in mList){
    if(mList[path].default){
      //  获取文件名
      let pathName = path.substr(path.lastIndexOf('/') + 1,5)
      
      if(msg[pathName]){
        msg[pathName] = {
          ...mList[pathName],
          ...mList[path].default
        }
      }else{
        msg[pathName] = mList[path].default
      }
      
    }
  }
}

  //注册i8n实例并引入语言文件
 const i18n = createI18n({
    legacy: false,
    locale: 'zh-CN',
    messages: getLangAll()
  })
  
  export default i18n;

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router/index'
import VueI18n from '@/locales/index'

const app = createApp(App)
app.use(router)
app.use(VueI18n)
app.use(ElementPlus)
app.mount('#app')

// vite.config.ts
不用配置

案例页面

<script lang="ts" setup>
import { reactive } from 'vue'
import { useI18n } from "vue-i18n";
import i18n from '@/locales/index'

const { t } = useI18n();
const state = reactive({
    option: [
        {
            value: 'zh-CN',
            label: '中文',
        },
        {
            value: 'en-US',
            label: 'English',
        },
        {
            value: 'ko-KR',
            label: 'Korean',
        },
    ],
    currentLang: 'zh-CN'
})
// 修改当前语言
const handleChange = (e:string):void => {
    i18n.global.locale.value = e
    // 刷新当前页面 不然有的时候国际化不生效
    location.reload()
}
</script>
<template>
 <span>{{t('home')}}</span>
    <el-select @change="handleChange" v-model="state.currentLang" placeholder="Select">
        <el-option
            v-for="item in state.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>
</template>