前端支持国际化流程 vue

旧巷幽草{香

已于 2023-02-28 10:47:20 修改

阅读量798

点赞数

分类专栏： vue.js element_ui 文章标签： vue.js 前端 javascript

于 2023-02-22 09:08:18 首次发布

本文链接：https://blog.csdn.net/qq_38181746/article/details/129154771

版权

vue.js 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

element_ui

19 篇文章 0 订阅

订阅专栏

文章介绍了在Vue2项目中实现前端国际化的过程，包括遇到的npm安装vue-i18n时的版本冲突问题，以及如何配置i18n，创建lang目录存放国际化文件，设置不同语言的文本内容，并在main.js、store和组件中集成和使用i18n功能。

摘要由CSDN通过智能技术生成

实现前端国际化

在开发管理系统过程中，突然遇到一个需求，就是支持页面国际化，支持中英文语言切换，所以记录一下开发的过程。

国际化开发流程

这里我采用的是i18n来进行国际化下面是国际化的步骤：

下载vue-i18n插件，这里笔者在下载的时候下载失败了，看了一下报错信息是因为版本的问题
在vue2环境下，默认安装 npm install vue-i18n 的版本是 vue-i18n@9.2.2，所以报错信息如下：

 PS D:\myFile\dev\YSJ-dev\cbj-mall-manage> npm i vue-i18n -save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vue-admin-template@4.4.0
npm ERR! Found: vue@2.6.10
npm ERR! node_modules/vue
npm ERR!   vue@"2.6.10" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vue-i18n@9.2.2
npm ERR! node_modules/vue-i18n
npm ERR!   vue-i18n@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! peer vue@"^3.0.0" from vue-i18n@9.2.2  （意思是版本不匹配）
npm view vue-i18n versions --json 命令查看所有的版本

当然也可以在package.json中dependencies节点添加vue-i18n，之后重新下载依赖

"vue-i18n": "7.3.2",

src目录下创建lang目录，存放国际化文件此处包含三个文件，分别是 index.js zh.js en.js

// index.js
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 enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // 设置语言 选项 en | zh
  locale: Cookies.get('language') || 'en',
  // 设置文本内容
  messages
})

export default i18n

// zh.js
export default {
  login: {
    title: '若依后台管理系统',
    logIn: '登录',
    username: '账号',
    password: '密码'
  },
  tagsView: {
    refresh: '刷新',
    close: '关闭',
    closeOthers: '关闭其它',
    closeAll: '关闭所有'
  },
  settings: {
    title: '系统布局配置',
    theme: '主题色',
    tagsView: '开启 Tags-View',
    fixedHeader: '固定 Header',
    sidebarLogo: '侧边栏 Logo'
  }
}

// en.js
export default {
  login: {
    title: 'RuoYi Login Form',
    logIn: 'Log in',
    username: 'Username',
    password: 'Password'
  },
  tagsView: {
    refresh: 'Refresh',
    close: 'Close',
    closeOthers: 'Close Others',
    closeAll: 'Close All'
  },
  settings: {
    title: 'Page style setting',
    theme: 'Theme Color',
    tagsView: 'Open Tags-View',
    fixedHeader: 'Fixed Header',
    sidebarLogo: 'Sidebar Logo'
  }
}

在src/main.js中增量添加i18n

import i18n from './lang'

// use添加i18n
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  i18n,
})

在src/store/getters.js中添加language

language: state => state.app.language,

在src/store/modules/app.js中增量添加i18n

const state = {
  language: Cookies.get('language') || 'en'
}

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

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

在src/components/LangSelect/index.vue中创建汉化组件

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command="zh">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command="en">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)
      this.$message({
        message: '设置语言成功',
        type: 'success'
      })
    }
  }
}
</script>

在页面中使用方法
在zh.js和en.js中填写你要国际化的东西，要一一对应，然后就可以用下面的方法使用了

普通文本使用方式： {{ $t('login.title') }}
标签内使用方式：   :placeholder="$t('login.password')"
js内使用方式       this.$t('login.user.password.not.match')

在获取不到this的js文件中使用，比如request.js等文件中使用vue-i18n
引入定义的js

import  i18n  from '@/lang'

在js文件中使用，因为获取不到this，所以就不能使用this.$t()只能使用t()

 MessageBox.confirm(i18n.t('message.expire'), i18n.t('message.systip'), { confirmButtonText: i18n.t('btn.relogin'), cancelButtonText: i18n.t('btn.cancel'), type: 'warning' }).then(() => {
          isRelogin.show = false;
          store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;
      });