vue3.0国际化

安装

npm install vue-i18n@next 

快速使用

封装组件

前提准备

创建 /@ts/language/index.ts 文件夹

import {createI18n} from 'vue-i18n';
import { App } from 'vue';
import zh from '/@ts/language/lang/zh';
import en from '/@ts/language/lang/en';
export const i18n = createI18n({
    locale: 'zh',//zh 中文
    messages: {
      'zh':zh,
      'en': en
    }
  });
/**
 * 挂载到vue实例函数
 * @param app vue实例
 */
export function setupI18n(app: App<Element>) {
    app.use(i18n);
  }
  

import zh from ‘/@ts/language/lang/zh.ts’;
import en from ‘/@ts/language/lang/en.ts’;

//en.ts
const en = {
    // 头部菜单
    language:"English",
    login:{
        subBtn:"login",
        tabs:{
            user:"user login",
            supplier:"supplier login"
        }
    },
    header_menu: {
        logout: 'sign out' 
    }
}
export default en
// zh.ts
const zh = {
    // 头部菜单
    language:"多语言",
    login:{
        subBtn:"登录",
        tabs:{
            user:"用户登录",
            supplier:"供应商登录"
        }
    },
    header_menu: {
        logout: '退出' 
    }
}
export default zh

根据实际情况 看是否封装组件

<template>
  <div>
        <el-dropdown @command="handleLanguage">
        <span class="el-dropdown-link">
         {{ $t('language')}}  <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
        </template>
        </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import {i18n} from "/@ts/language"
import {ref,defineProps,reactive,
onMounted,
} from 'vue';

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
 const count =ref(0);
 const state = reactive({
 })
 const handleLanguage =(val:string)=>{
 i18n.global.locale = val
 }
onMounted(() => {
   
})
 defineProps({
  msg:  {
      type: String,
      required: false
    }
})

</script>

<style  scoped lang="scss" >

</style>