vue中使用element的i18n语言转换(保姆式教程-保证能用)

1、项目中需要使用的插件,vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用

npm i element-ui -S
npm i js-cookie -S
npm i vue-i18n@8.28.2  //因为我项目使用的vue2,直接安装报错了,就下载了固定的版本

2、在main.js中引入i18n

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';//引入element
import 'element-ui/lib/theme-chalk/index.css';//引入element样式
import i18n from './lang'//引入语言包
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

3、创建lang文件夹,然后对应的js语言文件
在这里插入图片描述
index文件是处理语言切换的文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'
import jaLocale from './ja'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  },
  es: {
    ...esLocale,
    ...elementEsLocale
  },
  ja: {
    ...jaLocale,
    ...elementJaLocale
  }
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})
export default i18n

zh.js文件,中文语言包

export default {

  hello: {
    title: "欢迎进入vue+node后台管理系统"
  },
  about:'这是about页面'

}

en.js 英文语言包

export default {

  hello: {
    title: "Welcome to the Vue+node backend management system"
  },
  about: 'This is an about page'

}

其他的语言类似以上操作,创建xx.js的文件,在lang文件夹下面的index.js引入并且在messages里面使用即可
在这里插入图片描述
因为要在最外层切换,所以需要使用vuex,又想刷新语言不丢失,可以保存在本地
在store里面创建app.js模块

import Cookies from 'js-cookie'
import { getLanguage } from '@/lang/index'

const state = {
  language: getLanguage(),
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  },
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

然后在index.js引入模块即可
在页面中进行语言切换

<el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>
    {{ $t('hello.title') }}    //使用的语言包

  btnList: [
        {
          name: '中文',
          type: 'zh'
        },
        {
          name: 'English',
          type: 'en'
        },
        {
          name: 'Español',
          type: 'es'
        },
        {
          name: '日本語',
          type: 'ja'
        }
      ]
//方法
 handleClick(lang) {
      this.$i18n.locale = lang.type
      this.$store.dispatch('app/setLanguage', lang.type)
      this.$message({
        message: lang.name + ':' + 'Switch Language Success',
        type: 'success'
      })
    }

详细页面代码

<template>
  <div class="home">
    <el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>
    {{ $t('hello.title') }}
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      btnList: [
        {
          name: '中文',
          type: 'zh'
        },
        {
          name: 'English',
          type: 'en'
        },
        {
          name: 'Español',
          type: 'es'
        },
        {
          name: '日本語',
          type: 'ja'
        }
      ]
    }
  },
  methods: {
    handleClick(lang) {
      this.$i18n.locale = lang.type
      this.$store.dispatch('app/setLanguage', lang)
      this.$message({
        message: lang.name + ':' + 'Switch Language Success',
        type: 'success'
      })
    }
  },
  components: {}
}
</script>

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/606288.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

芸众商城电商专业版400+插件源码+搭建教程

介绍&#xff1a; 芸众商城社交电商系统SAAS平台前端基于vue开发&#xff0c;后端基于研发积分商城系统源码 php&#xff0c;本文安装芸众商城全插件&#xff08;400多个&#xff09;商业版平台源码&#xff0c;可同时支持多端口部署运行&#xff1b;使用宝塔面板一键部署的形…

出货300万片后,智舱界「小高通」浮出水面

‍作者 |张祥威 编辑 |德新 2024年北京车展&#xff0c;本土芯片公司开始截击外企供应商。 很长一段时间内&#xff0c;汽车行业智驾芯片看英伟达&#xff0c;座舱芯片看高通。英伟达Orin系列广受欢迎&#xff0c;高通8155席卷主流智能汽车&#xff0c;8295更是被视为最强配置…

倍思|西圣开放式耳机哪个好用?热门机型深度测评!

在数字化生活的浪潮中&#xff0c;耳机已成为我们不可或缺的伴侣。然而&#xff0c;长时间佩戴传统的耳机容易导致的耳道疼痛等问题&#xff0c;严重的话将影响听力。许多人开始寻找更为舒适的佩戴体验。开放式耳机因为不需要需直接插入耳道的设计&#xff0c;逐渐受到大众的青…

不会pdf修改编辑文字怎么办?看完秒懂

不会pdf修改编辑文字怎么办&#xff1f;在日常生活中&#xff0c;PDF文件已成为我们工作、学习不可或缺的一部分。然而&#xff0c;很多人对PDF文件的编辑操作感到困惑&#xff0c;尤其是修改其中的文字。今天&#xff0c;我们就来详细解析一下&#xff0c;不会PDF修改编辑文字…

全局变量在 Python 中的应用场景

在Python中&#xff0c;全局变量是在程序的全局范围内定义的变量&#xff0c;可以在整个程序中访问。虽然在Python中使用全局变量并不像在其他编程语言中那样被推荐&#xff0c;因为它可能导致代码不易理解和维护&#xff0c;但在一些特定的情况下&#xff0c;全局变量仍然是有…

企业微信hook接口协议,ipad协议http,设置是否自动同意

设置是否自动同意 参数名必选类型说明uuid是String每个实例的唯一标识&#xff0c;根据uuid操作具体企业微信 请求示例 {"uuid":"bc4800492083fdec4c1a7e5c94","state":1 //1 是需要验证同意&#xff08;需要手动点击同意&#xff09; 0关闭验证…

gtest的编译与使用

文章目录 gtest的编译与使用概述笔记CMake参数官方文档测试程序测试效果END gtest的编译与使用 概述 gTest是 googletest的缩写&#xff0c;如果直接找gTest项目&#xff0c;是找不到的。 库地址 https://github.com/google/googletest.git 迁出到本地后&#xff0c;切到最新…

中电金信:看 “咨询+技术”如何引领数字化变革新风向

当前&#xff0c;新一轮创新技术和产业变革正在重塑全球的经济格局。日本政府及社会各界也从各个领域着手推进数字化。2021年&#xff0c;日本政府成立了“数字厅”&#xff0c;通过一系列举措推动数字化升级&#xff0c;希望将日本加速转型为数字经济的区域领导者&#xff0c;…

继续SQL

主知识点六&#xff1a;having 聚合前的筛选用where&#xff0c;聚合后的筛选用having Having和where的区别是&#xff1a;运行顺序和对象不用 Having是在group by聚合后的基础上进行筛选。 ● 【例题27*】&#xff08;运行原理&#xff09;查询总人口数至少为3亿的大洲和…

git的标签管理

理解标签 在Git中,标签tag用于标记特定的一个重要点&#xff0c;比如版本发布。标签允许捕捉某一次提交的状态&#xff0c;当我们需要退回到某次提叫的版本时&#xff0c;通过标签我们快速定位到。标签具有两种类型&#xff1a; 轻量标签&#xff1a;最简单的标签形式&#x…

QGIS编译

一&#xff0c;安装&#xff1a;OSGeo4W 二&#xff0c;安装&#xff1a;Cygwin64 https://www.cygwin.com/setup-x86_64.exe 三&#xff0c;安装&#xff1a; 安装bison和flex 四&#xff09;QGIS_3.28 下载QGIS_3.28的源码包 五 环境变量设置&#xff1a; echo off set VS19…

那些可免费使用的在线大语言模型服务

2022年底以ChatGPT[1]为代表的大语言模型的出现掀起了人工智能应用的新浪潮。这些庞大的语言模型经过对海量文本数据的训练&#xff0c;能够理解和生成逼近人类水平的自然语言&#xff0c;在对话、问答、文本生成、代码编写等领域展现出了惊人的能力。 最初这种能力“垄断”在O…

用手势掌控PPT,玩转演示新姿势

推荐运行环境 使用anaconda创建环境&#xff0c;以免污染原来的python开发环境conda install python3.9pip install -q mediapipe0.10.0pip install pyautoguiPython: version 3.8 - 3.11PIP: version 20.3 请注意以下的坑 以下为我测试过程中的大坑&#xff0c;请及时避开&am…

【2024高校网络安全管理运维赛】巨细记录!

2024高校网络安全管理运维赛 文章目录 2024高校网络安全管理运维赛MISC签到考点&#xff1a;动态图片分帧提取 easyshell考点&#xff1a;流量分析 冰蝎3.0 Webphpsql考点&#xff1a;sql万能钥匙 fileit考点&#xff1a;xml注入 外带 Cryptosecretbit考点&#xff1a;代码阅读…

Driftingblues靶机系列Driftingblues5

获取靶机的ip&#xff1a;192.168.108.37 扫描靶机的端口服务: 看到web服务和ssh服务&#xff1a; 先查看一下web服务&#xff1a; 扫描到web服务的信息&#xff1a; 访问web服务&#xff1a; 在源代码中并没有看到有什么新的信息&#xff0c;扫描一下靶机目录&#xff1a;…

vue地址选择器-三级联选择器+详细地址

在页面的显示情况 前端拼接实现存储 具体实现步骤 1.安装中国全省市区的数据 在命令提示符窗口使用管理员身份进入对应vue项目的文件夹&#xff0c;在窗口安装 npm install element-china-area-data -S2.在script内引入安装的数据 import {regionData,codeToText } from…

从Flutter范儿的单例来看Dart的构造函数

点击上方蓝字关注我&#xff0c;知识会给你力量 单例模式 单例模式应该是设计模式中使用的最广泛的一种设计模式了&#xff0c;在Kotlin中&#xff0c;甚至为它单独创建了一个语法糖——object类&#xff0c;来快速实现单例模式&#xff0c;而在Dart中&#xff0c;并没有像Kotl…

某盾BLACKBOX逆向关键点

需要准备的东西&#xff1a; 1、原JS码 2、AST解混淆码 3、token(来源于JSON) 一、原JS码很好获取&#xff0c;每次页面刷新&#xff0c;混淆的代码都会变&#xff0c;这是正常&#xff0c;以下为部分代码 while (Qooo0) {switch (Qooo0) {case 110 14 - 55: {function O0…

Win10/11共享文件夹,访问提示需要输入用户名密码

Win10/11共享文件夹&#xff0c;访问提示需要输入用户名密码 问题 已经关闭了密码保护共享&#xff0c;但是局域网其他电脑访问该文件夹&#xff0c;提示需要输入用户名和密码 解决方法 操作步骤 1.按WINR键打开运行&#xff0c;输入gpedit.msc打开本地组策略编辑器 2.按如…

五种算法(BWO、RUN、SO、HO、GWO)求解复杂城市地形下无人机路径规划,可以修改障碍物及起始点(MATLAB)

一、算法介绍 &#xff08;1&#xff09;白鲸优化算法BWO 参考文献&#xff1a;Zhong C, Li G, Meng Z. Beluga whale optimization: A novel nature-inspired metaheuristic algorithm[J]. Knowledge-Based Systems, 2022, 109215. &#xff08;2&#xff09;龙格-库塔优化…