vue3.0国际化

Love The Way You Lie 2022-09-05 05:21 154阅读 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>