Vue项目中的多语言配置与动态切换-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52910435/article/details/117446399

这篇博客详细介绍了如何在Vue项目中实现多语言支持，包括ElementUI的配置，自定义内容的多语言处理，以及动态切换中英文的方法。通过引入vue-i18n并设置不同语言包，实现组件和自定义内容的语言切换。同时，文章还讨论了全屏功能的实现，包括基础逻辑、图标切换以及监听浏览器退出全屏和ESC键退出的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多语言支持

国际化处理

vue项目中的多语言支持使用的是vue-i18n https://kazupon.github.io/vue-i18n/zh/started.html

目标

实现elementUI中英文切换功能，感受中文切换的效果

安装国际化的包

npm i vue-i18n@8.22.2

请注意版本号。vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本

ElementUI多语言配置

引入element语言包文件src/lang/index.js

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 中文环境下的语言数据
    en: {
      ...elementEN
    },
    // 英文环境下的语言数据
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

在main.js中挂载 i18n的插件

import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

验收效果

src/lang/index.js 手动修改locale属性，改成zh 或者 en 查看日历组件的星期显示
在这里插入图片描述

自定义内容多语言配置

背景

上一小结，我们通过配置让ElementUI组件库内部支持了多语言配置，那我们自定义的内容部分:也就是没有使用elementUI的部分该如何实现多语言呢？

目标

引入自定义中英文配置

步骤

注：自定义语言配置文件在项目资源/语言包里面

|- src
			|-lang
						|-index.js
						|-en.js # 从资源包中拷入的
						|-zh.js # 从资源包中拷入的

配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
// 引入自定义中文包
import customZH from './zh' 
// 引入自定义英文包
import customEN from './en' 

Vue.use(VueI18n)

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: 'zh',
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN // 将自定义英文包加入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH // 将自定义中文包加入
    }
  }
})

实现title中英文切换

在这里插入图片描述
准备翻译方案

修改头部模板渲染

<div class="app-breadcrumb">
  {{ $t('navbar.companyName') }}
  <span class="breadBtn">体验版</span>
</div>

手动将locale进行en和zh切换查看效果

src/lang/index.js

export default new VueI18n({
  // 切换这里试试 en
  locale: 'zh'
  ...
})

理解中英文切换原理

当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本，基础原理如下图：
在这里插入图片描述

实现动态切换中英文

背景：现在我们虽然已经实现了中英文切换的核心逻辑，但是是死的，不能动态切换

目标

想要实现以下的效果，点击中英文按钮，弹出下拉框，当我们点击中文和en的时候可以实现动态的切换当前的语言
在这里插入图片描述

思路

点击下拉框时把当前选择的语言赋值给this.$i18n.locale属性即可

封装多语言组件

src/components/Lang/index.vue

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>

全局注册

在component/index.js中进行全局组件注册

import Lang from './Lang'
export default {
  // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
  install(Vue) {
    // 进行组件的全局注册
    Vue.component('Lang', Lang)
  }
}

在Navbar组件中引入使用组件

<!-- 语言包 -->
<lang class="right-menu-item" />
<!-- 全屏组件 -->
<screen-full class="right-menu-item" />

全屏功能-基础实现

目标

利用浏览器提供的requestFullScreen来实现全屏功能

思路

在顶部的工具栏中补充一个按钮，点它之后进行全屏展示

为了方便复用功能，把它注册成一个全局组件
在这里插入图片描述

准备组件

创建文件src/componets/ScreenFull/index.vue

<template>
  <!-- 放置一个图标 -->
  <div>
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

要想这个图片能正确显示，还必须在src\icons\svg下有对应的文件

注册全局组件

components/index.js

import ScreenFull from './ScreenFull'
const componentsPlugin = {
  install(Vue) {
    //...
    Vue.component('ScreenFull', ScreenFull)
  }
}

使用全局组件

Layout/NavBar/index.vue

<ScreenFull class="right-menu-item" />

<style>
.right-menu-item {
   vertical-align: middle;
}
</style>

实现全屏逻辑

核心技术：

浏览器底层给我们提供了开启全屏和关闭全屏的API

1 开启全屏: document.documentElement.requestFullscreen()

2 关闭全屏: document.exitFullscreen()

核心思路：

如果当前是全屏状态就关闭全屏
如果当前是非全屏状态就开启全屏
调用API之后把当前是否为全屏的状态切换一下

代码实现：

<svg-icon icon-class="fullscreen" class="fullscreen" @click="toggleScreen" />

<script>
export default {
  name: 'ScreenFull',
  data() {
    return {
      isScreenFull: false
    }
  },
  methods: {
    toggleScreen() {
      this.isFullScreen = !this.isFullScreen

      if (this.isFullScreen === true) {
        // 全屏
        document.documentElement.webkitRequestFullScreen()
      } else {
        document.exitFullscreen()
      }
    }
  }
}
</script>

这里有兼容性的问题：webkitRequestFullScreen

实现全屏情况下icon切换

<svg-icon
  :icon-class="isScreenFull? 'exit-fullscreen': 'fullscreen'"
  class="fullscreen"
  @click="toggleScreen"
/>

全屏功能-监听浏览器退出全屏监听ESC退出

现存问题

当我们点击浏览器叉号或者ESC键退出全屏的时候，发现我们的icon图标并没有修改，这是因为浏览器退出之后并不会自动同步到isScreeFull，需要我们手动实现

思路

我们要做的事情：监听浏览器退出全屏的时候，把本地状态改为false

代码

mounted() {
    document.addEventListener('fullscreenchange', e => {
      console.log('fullscreenchange.....')
      // 监听到屏幕变化，在回调中判断是否已退出全屏
      // 如果已退出全屏 把本地状态修改为false
      const isFull = document.fullscreenElement
      if (!isFull) {
        this.isFullScreen = false
      }
    })
    document.addEventListener('webkitfullscreenchange', e => {
      console.log('fullscreenchange.....')
      // 监听到屏幕变化，在回调中判断是否已退出全屏
      // 如果已退出全屏 把本地状态修改为false
      const isFull = document.fullscreenElement
      if (!isFull) {
        this.isFullScreen = false
      }
    })
    document.addEventListener('mozfullscreenchange', e => {
      console.log('fullscreenchange.....')
      // 监听到屏幕变化，在回调中判断是否已退出全屏
      // 如果已退出全屏 把本地状态修改为false
      const isFull = document.fullscreenElement
      if (!isFull) {
        this.isFullScreen = false
      }
    })
  },
  methods: {
    toggleScreen() {
      const fn = document.documentElement.webkitRequestFullScreen ||
      document.documentElement.RequestFullScreen ||
      document.documentElement.mozRequestFullScreen

      console.log(fn)

      this.isFullScreen = !this.isFullScreen

      if (this.isFullScreen === true) {
        // 全屏
        // window.fn()
        fn.call(document.documentElement)
      } else {
        document.exitFullscreen()
      }
    }
  }