首页 前端知识 【Vue I18n 国际化插件】vue3 vue-i18n 项目实战总结

【Vue I18n 国际化插件】vue3 vue-i18n 项目实战总结

2024-06-06 00:06:40 前端知识 前端哥 4 858 我要收藏

一、为什么要国际化?

前端国际化:应用要服务于不同的地区的用户,所以应用不能单一语言;应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中,对于国际化语言的需求越来越高了,其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

前端国际化:应用要服务于不同的地区的用户,所以应用不能单一语言;应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中,对于国际化语言的需求越来越高了,其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

二、插件基本思路

  • 定义语言包:需要几种语言展示,就定义几个语言包。
  • 组合语言包对象:创建对象,对语言包进行组合,对象的 key 为语言包引用,值为语言包对象。
  • 创建实例:创建 vue-i18n 类的对象,添加 message 和 locale 属性。
  • 挂载:挂载创建的实例对象。

三、插件版本适用框架

vue-i18n 作为国际化插件,它主要有两个版本:v8 和 v9。v8 版本适用于 Vue2 框架,v9 版本适用于 Vue3 框架。具体区别可以查看 官网 ,以下内容均在 Vue3 中使用。

四、项目实战

1、安装插件 vue-i18n
npm install vue-i18n --save

yarn add vue-i18n --save
2、创建文件,进行相关配置

1.在 src 目录下,新建 i18n 文件夹 2.在 i18n 文件夹中,新建 lang 文件夹(en.ts 、zh-cn.ts)、index.ts 文件
在这里插入图片描述
en.ts

export default {
  home: {
    name: 'home',
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like',
  },
}

zh-cn.ts

export default {
  home: {
    name: '首页',
  },
  tabs: {
    work: '作品',
    private: '私密',
    collect: '收藏',
    like: '喜欢',
  },
}

index.ts

import { createI18n } from 'vue-i18n'
// 语言包
import zhCn from './lang/zh-cn'
import en from './lang/en'

const i18n = createI18n({
  legacy: false, // 设置为 false,启用 composition API 模式
  locale: sessionStorage.getItem('localeLang') || 'zhCn',
  messages: {
    zhCn,
    en,
  },
})
export default i18n
3、mian.js 引入 i18n 配置文件
import { createApp } from 'vue'
import App from './App.vue'
// i18n
import i18n from '@/i18n/index'

const app = createApp(App)
app.use(i18n)
app.mount('#app')
4、使用 pinia 存储 vue-i18n 全局状态
import { defineStore } from 'pinia'
interface ILanguage {
  language: string
}

export const useLangStore = defineStore('lang', {
  state: (): ILanguage => {
    return {
      language: sessionStorage.getItem('localeLang') || 'zhCn',
    }
  },
  actions: {
    changeLang(data: 'zhCn' | 'en') {
      this.language = data
    },
  },
  persist: true,
})
5、定义一个中英文切换的组件,在需要展示的父组件中引入即可
<script setup lang="ts">
import { langType } from '@/enum/options'
import { useLangStore } from '@/store/modules/lang'
import { getCurrentInstance } from 'vue'

const store = useLangStore()
const { proxy } = getCurrentInstance() as any
const handleCommand = (value: 'zhCn' | 'en') => {
  if (store.language === value) return
  proxy.$i18n.locale = value
  store.changeLang(value)
  ElMessage.closeAll()
  ElMessage.success(`${value === 'en' ? '英文' : '中文'}切换成功!`)
}
</script>

<template>
  <el-dropdown @command="handleCommand" class="lang-warp">
    <span class="el-dropdown-link">
      {{ langType[store.language] }}
      <el-icon>
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zhCn">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.lang-warp{
  margin: 0 20px;
}
</style>
6、在对应的组件中使用定义的语言类型
<template>
  <div>
    <div> {{ $t('home.name') }}</div>
    <div> {{ $t('tabs.work') }}</div>
    <div> {{ $t('tabs.private') }}</div>
    <div> {{ $t('tabs.collect') }}</div>
    <div> {{ $t('tabs.like') }}</div>
    <br/>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
</template>

在这里插入图片描述
在这里插入图片描述

五、在外部的ts文件中使用

import i18n from "@/i18n/index";

const tips = i18n.global.t('name') 

惊喜彩蛋

Element Plus 组件默认使用英语,如果你希望跟着中英文切换

<script setup lang="ts">
import { useLangStore } from '@/store/modules/lang'
const store = useLangStore()

// 导入 Element Plus 语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
const lang = {
  zhCn,
  en,
}
</script>

<template>
  <el-config-provider :locale="lang[store.language]">
    <router-view></router-view>
  </el-config-provider>
</template>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10957.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!