vue+vue-i18n来实现国际化功能（语言切换）

安装vue-i18n依赖包

这里有一个坑（我使用的时vue2，不限制vue-i18n的版本时，会默认安装最新版本，最新版本适配的vue3,所以这里使用的5.2.2版本）

npm install vue-i18n@5.2.2 --save-dev
或者
yarn add vue-i18n@5.2.2 --save-dev

创建语言文件包

在src目录下，创建一个i18n文件，创建一个index.js文件，对i18n进行配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
    locale: 'zh',  //默认显示为中文
    messages: {
        'zh': require('../lang/zh.json'),
        'en': require('../lang/en.json')
    }
})
export default i18n

在main.js文件中引入i18n，并挂载到全局

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n/index.js'   //引入i18n文件
import { Table, TableColumn, Button  } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Button)

new Vue({
  i18n,   //挂载到全局
  render: h => h(App),
}).$mount('#app')

 

在sr此文件下创建一个languages文件，对语言进行配置，这里创建了两个文件分别为 zh.json和en.json文件，分别配置中文和英文 (注意要一一对应)

zh.json

{
    "common": {
        "home": "首页",
        "login": "登录",
        "exit": "退出"
    },
    "test": {
        "userMng": "用户管理",
        "deptMng": "机构管理",
        "roleMng": "角色管理",
        "menuMng": "菜单管理",
        "logMng": "日志管理"
    }
}

en.json

{
    "common": {
        "home": "Home",
        "login": "Login",
        "exit": "Exit"
    },
    "test": {
        "userMng": "User Manage",
        "deptMng": "Dept Manage",
        "roleMng": "Role Manage",
        "menuMng": "Menu Manage",
        "logMng": "Log Manage"
    }
}

主要配置就这些了，接下来是详细使用

在需要使用的地方，这里$t是i18n自带的方法，必须用这种写法

<template>
  <div id="app">
    <ul>
      <li>{{$t("common.home")}}</li>
      <li>{{$t("common.login")}}</li>
      <li>{{$t("common.exit")}}</li>
    </ul>
    <ul>
      <li>{{$t("test.userMng")}}</li>
      <li>{{$t("test.deptMng")}}</li>
      <li>{{$t("test.roleMng")}}</li>
      <li>{{$t("test.menuMng")}}</li>
      <li>{{$t("test.logMng")}}</li>
    </ul>
    <!-- 语言切换 -->
    <div>
      <el-button type="success" @click="chngeLanguage('zh')">中文</el-button>
      <el-button type="success" @click="chngeLanguage('en')">英文</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    chngeLanguage(lang){
      this.$i18n.locale=lang
    }
  }
}
</script>

<style>

</style>

以上就是一个简单的国际化功能，有任何问题，随时私聊。