vue3.0国际化

最新推荐文章于 2024-08-10 00:20:10 发布

BLUESKYHOST

最新推荐文章于 2024-08-10 00:20:10 发布

阅读量439

点赞数

分类专栏：前端框架 vue 文章标签： vue 国际化 vue-i18n

本文链接：https://blog.csdn.net/BLUESKYHOST/article/details/119754926

版权

前端框架同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在 Vue 项目中配置和使用 vue-i18n 实现国际化功能。创建了 `i18n` 对象，并提供了中文和英文的语言包。同时展示了如何在组件中调用 `$t` 方法来获取翻译后的文本，以及通过下拉菜单切换语言。还包含了在组件中设置和监听语言切换的方法。

摘要由CSDN通过智能技术生成

安装

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>