使用i18n实现vue2+element UI的国际化

搭建环境

安装i18n

要注意使用vue2安装i18n不能安装最新版，会不兼容。

npm install vue-i18n@8.27.1 --save

新建相关文件

其中en.js和zh.js是存放自定义的语言配置文件，change-language.vue是实现切换语言的组件的文件。index.js 是语言包入口文件。

编写代码

index.js的内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 引入自定义的各个语言配置文件
import zh from './config/zh';
import en from './config/en';
//element-ui自带多语言配置
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)

// 各个国家语言包
const messages = {
    en: {
        ...en,
        ...enLocale
    },
    zh: {
        ...zh,
        ...zhLocale
    },
}

export default new VueI18n({
    locale: localStorage.getItem('change-language') || 'zh-CN',
    messages,
    silentTranslationWarn: true // 忽略翻译警告
})

change-language.vue

<template>
  <el-dropdown @command="handle">
    <span class="el-dropdown-link ">
      {
  {$t('Language')}}<i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) of list" :key="index" :command="item.key">{
  {item.name}}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>

export default {
     
  name: 'change-language',
  data() {
     
    return {
     
      list: [
        {
      key: 'en', name: 'English' }, // 英语
        {
      key: 'zh-CN', name: '中文' } // 中文
      ]
    }
  },
  methods: {
     
    handle(value) {
     
      this.$i18n.locale = value
      localStorage.setItem('change-language', value)
      location.reload()
    }
  }
}
</script>
<style scoped lang="scss">
</style>

这里我把选择的是什么语言存储到本地

localStorage.setItem('change-language', value)

实现国际化

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from "@/element";

import 'element-ui/lib/theme-chalk/index.css';
// 国际化
import i18n from './components/i18n';

Vue.config.productionTip = false
Vue.use(element, {
    i18n: (key, value) => i18n.t(key, value)
})


new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

根据项目编写自定义的语言配置文件

en.js

const en = {
    'Language': 'English',
    login:{
        title:"Movie Review Information Management System",
        username: "Username",
        password: "Password",
        rememberMe: "Remember Me",
        forgotPassword: "Forgot Password",
        login: "Login",
        loggingIn: "Logging In...",
        footer: "Copyright © 2023-2024 Movie Review Information Management System All Rights Reserved.",
        enterUsername: "Please enter your username",
        enterPassword: "Please enter your password"
    }
}
export default en;

zh.js

const zh = {
    'Language': '中文',
    login:{
        title:'电影点评网站信息管理系统',
        username: "账号",
        password: "密码",
        rememberMe: "记住密码",
        forgotPassword: "忘记密码",
        login: "登录",
        loggingIn: "登录中...",
        footer: "Copyright © 2023-2024 电影点评网站信息管理系统 All Rights Reserved.",
        enterUsername: "请输入您的账号",
        enterPassword: "请输入您的密码"
    }
}
export default zh;

在登录页面调用

一旦将 VueI18n 实例挂载到 Vue 实例上，在 Vue 组件中直接使用 $t 方法，可以通过指定键(key)来获取对应语言的翻译文本。

在template中直接使用，如下：

  $t('login.title') 

在script中使用，如下：

   this.$t('login.enterUsername')

和在template中直接使用的区别就是在前面加上了this

下面是完整代码，仅供参考

<template>
    <div class