vue2 elementUI vue-i18n国际化中英文切换

笑的不敷衍

已于 2024-08-12 16:17:41 修改

阅读量199

点赞数 1

文章标签： elementui vue.js 前端

于 2024-08-07 15:23:56 首次发布

本文链接：https://blog.csdn.net/xiaodebufuyan/article/details/140652922

版权

npm install vue-i18n@8.2.1 --save
src下面新建文件夹
en.js文件内容：

export const h = {
  system: 'Medical Cloud Images Platform',
  full: 'check registration',
  account: 'hospital',
  invoice: 'invoice',
  reconciliation: 'Statement',
  record: 'recording',
  report: 'report',
  setting: 'Settings',
  login: 'login',
  tips: 'Username and password are filled in casually',
  administrator: 'administrator',
  placeUser: 'please enter user name',
  palcePass: 'Please enter your password',
  palceCode: 'please enter verification code',
  accounts: 'accounts',
  password: 'password',
  code: 'Verification code',
}

zh.js文件内容：

export const h = {
  system: '医学影像云平台',
  full: '检查登记',
  account: '医院',
  invoice: '原始单据',
  reconciliation: '财务对账',
  record: '对账记录',
  report: '月结报表',
  setting: '系统设置',
  login: '登录',
  tips: '用户名和密码随便填',
  administrator: '管理员',
  placeUser: '请输入用户名',
  palcePass: '请输入密码',
  palceCode: '请输入验证码',
  accounts: '账号',
  password: '密码',
  code: '验证码',
}

index.js 文件内容：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 全局挂载

export const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'en', // 从localStorage中获取 默认英文
  messages: {
    zh: require('./lan/zh'), // 中文语言包
    en: require('./lan/en'), // 英文语言包
  },
})

export default i18n

main.js 文件
中英文切换

    <div class="full" @click="changeLangEvent()">
      <el-button type="primary">{{ language }}</el-button>
    </div>
    <div class="system">{{ $t('h.full') }}</div>
    <el-tab-pane :label="$t('h.full')" name="initiate">

//方法
    changeLangEvent() {
      console.log(this.$i18n)
      if (this.language == 'EN') {
        localStorage.setItem('locale', 'zh')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: '切换为中文！',
          type: 'success',
        })
        localStorage.setItem('lang', 'ZH')
        this.language = 'ZH'
        location.reload() //重新加载
      } else if (this.language == 'ZH') {
        localStorage.setItem('locale', 'en')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: 'Switch to English!',
          type: 'success',
        })
        localStorage.setItem('lang', 'EN')
        this.language = 'EN'
        location.reload()
      }
    },

elementui国际化使用 element-ui": “^2.4.5”

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'//------重点

Vue.use(ElementUI, { locale })//------重点

// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'//------重点
import locale from 'element-ui/lib/locale'//------重点

// 设置语言
locale.use(lang)//------重点

// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)