详解vue element plus多语言切换

目录
  • 前言
  • 如何实现多语言切换 ?
    • 1、安装包vue-i18n
    • 2、在src目录下新建如图:
    • 3、 在main.js中
    • 4、在vue文件中使用
  • 如何动态切换语言并更改elementUI语言 ?
    • 1、利用vuex,在mutations中写一个方法更改element语言
    • 2、使用
  • 更改完elementUI组件视图不更新?
    • 1、 在router-view上控制视图显示/隐藏
    • 2、 在切换语言时调用reload
    • 3、需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言
  • 如何全局使用 $t 函数 ? 如何在js文件里使用vue-i18n ?
  • 在router.js中不能直接使用$t, 需自行引入该函数
  • 总结

前言

最近接手一个项目,该项目多国家使用,需要支持多语言的切换,在此记录。

解决一下问题:

  • 如何实现多语言切换 ?
  • 如何动态切换语言并更改elementUI语言 ?
  • 更改完elementUI组件视图不更新?
  • 如何全局使用 $t 函数 ?
  • 如何在js文件里使用vue-i18n ?

如何实现多语言切换 ?

1、安装包vue-i18n

npm i vue-i18n --save

2、在src目录下新建如图:

en.js

const EN = {
  login: {
    title: 'User Login'
  },
}
export default  EN

pl-pl.js

const PL_PL = {
  login: {
    title: 'Użytkownik jest zalogowany'
  },
}
export default  PL_PL

zh-cn.js

const ZH_CN = {
  login: {
    title: '用户登录'
  },
}
export default  ZH_CN

index.js

import { createI18n } from 'vue-i18n/index'
import 'dayjs/locale/zh-cn'
import zh from './zh-cn'
import en from './en'
import pl from './pl-pl'
const messages = {
  'zh-cn': zh,
  'en': en,
  'pl': pl
}
// Gets the current locale
export function getLanguage() {
  // Use the language of choice
  const chooselang = localStorage.getItem('locale')
  if (chooselang) return chooselang
  // if not shoose language
  const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  return locales.includes(lang) ? lang : 'zh-cn'
}
const i18n = createI18n({
  locale: getLanguage(),
  fallbackLocale: 'en',
  global: true,
  messages
})
export function $t(args) {
  return i18n.global.tc(args)
}
console.log($t('login.title'))
export default (app) => {
  app.use(i18n)
}

说明

getLanguage 函数 判断当前localStorage是否已有选择过语言如果没有则获取当前浏览器的语言;
封装 $t 函数并导出用在js文件中

3、 在main.js中

import language, { getLanguage, $t } from './language'
language(app)

4、在vue文件中使用

<template>
    //1.
	<div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div>
	//2.
	<el-input v-model="$t('login.title')"></el-input>
</template>

如何动态切换语言并更改elementUI语言 ?

1、利用vuex,在mutations中写一个方法更改element语言

// ----------------------- state -----------------------------
import { getLanguage } from '@/language'
const state = {
  lang: getLanguage()
}
export default state
// ----------------------- mutations-----------------------------
import * as Types from './types'
import locale from 'element-plus/lib/locale'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'
import localePL from 'element-plus/lib/locale/lang/pl'
const element = {
  'zh-cn': localeZH,
  'en': localeEN,
  'pl': localePL
}
const mutations = {
  // 切换语言
  [Types.SET_LANG](state, lang) {
    state.lang = lang
    localStorage.setItem('locale', lang)
    locale.use(element[lang])
  }
}
export default mutations
// ----------------------- types-----------------------------
export const SET_LANG = 'SET_LANG'

2、使用

import * as Types from '@/store/types'
import { useI18n } from "vue-i18n";
export default {
  setup(props,ctx) {
    const { locale: lang } = useI18n({ useScope: "global" })
    let store = useStore()
    const handelLanguage = (name) => {
      lang.value = name
      store.commit(Types.SET_LANG, name)
    }
    return {
      handelLanguage
    }
  }
}

更改完elementUI组件视图不更新?

这时你会发现就算我们提交commit去更改elementUI的语言 页面上也没有发生变化,因为视图组件并没有更新,如何刷新组件使之重新加载呢?

1、 在router-view上控制视图显示/隐藏

// ----------------------- template-----------------------------
<router-view v-if="isReloadRouter"/>
// ----------------------- script-----------------------------
const reload = () => {
	 state.isReloadRouter = false
     nextTick(() => {
       state.isReloadRouter = true
     })
}
provide("reload", reload)
<-- 自行引入 provide nextTick ->

2、 在切换语言时调用reload

 const handelLanguage = (name) => {
      lang.value = name
      store.commit(Types.SET_LANG, name)
      inject('reload')()
    }

3、需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

import language, { getLanguage, $t } from './language'
import '@/styles/elementDefault.scss'
store.commit(Types.SET_LANG, getLanguage())

如何全局使用 $t 函数 ? 如何在js文件里使用vue-i18n ?

全局挂在 $t 函数 ,在js文件里直接使用 $t 函数。

方法一:通过app.config.globalProperties挂在到全局

方法二: 通过provide、inject来实现

import language, { getLanguage, $t } from './language'
const app = createApp(App);
// ----------------------- app.config.globalProperties -----------------------------
app.config.globalProperties.$t = $t
// 使用
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$t()
// ----------------------- provide、inject -----------------------------
// main.js中
app.provide('$t', $t)
// 使用
const $t = inject('$t')
ElMessage.warning({
  message: $t('login.warnMessage'),
   type: 'warning'
 });

vue3不推荐在原型链上挂载一些东西,而更推荐使用provide、inject,所以最好使用通过依赖和注入provide和inject的方式

在router.js中不能直接使用$t, 需自行引入该函数

import { $t } from '@/language'
{
        path: '/mainManage/device',
        name: 'device',
        hidden: false,
        meta: { icon: 'circle', title: $t('router.device') },
        component: () =>
          import(/* webpackChunkName: "device" */ '@/views/mainManage/device')
      },

目前有一问题:因为我菜单展示的字段取的是路由信息里的title,router.js只在项目第一次进入的时候调用,当切换语言的时候菜单字段不会动态切换,只有刷新浏览器才会改变,如有解决方法希望留言告知!!!

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • vue项目实现多语言切换的思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA) 直接用网页翻译插件,机器翻译.这种效果不太理想,同时有一些局限性(后面会讲到) 问题 每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择.最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本.项目是基于 Vue.js 开发的,已经迭代过很多版本了.其实一开始是有规划多语言的

  • 详解Vue3怎么使用element-plus

    目录 1.安装 2.在main.js引入 3.使用 vue3出来一段时间了,element也更新了版本去兼容vue3,在这里简单的介绍一下如何使用element-plus吧 1.安装 npm install element-plus --save 2.在main.js引入 import { createApp, Vue } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css

  • 使用vue 国际化i18n 实现多实现语言切换功能

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • 利用vue-i18n实现多语言切换效果的方法

    前言 有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i18n实现切换中英文效果. 安装vue-i18n 我们使用npm安装vue-i18n. npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n. import Vue from 'vue' import App from

  • Vue中使用vue-i18插件实现多语言切换功能

    在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件  import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n

  • 详解vue element plus多语言切换

    目录 前言 如何实现多语言切换 ? 1.安装包vue-i18n 2.在src目录下新建如图: 3. 在main.js中 4.在vue文件中使用 如何动态切换语言并更改elementUI语言 ? 1.利用vuex,在mutations中写一个方法更改element语言 2.使用 更改完elementUI组件视图不更新? 1. 在router-view上控制视图显示/隐藏 2. 在切换语言时调用reload 3.需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

  • 详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

  • 详解vue的数据binding绑定原理

    自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般

  • 详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解Vue文档中几个易忽视部分的剖析

    针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components

  • 详解vue组件基础

    什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

  • 详解Vue+elementUI build打包部署后字体图标丢失问题

    错误描述: Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

随机推荐