在Vue中实现国际化 (vue-i18n插件)

声明：本文为博主原创，转载请注明

使用json文件/js文件都是可以的

博主觉得json引号太多了，而且必须使用双引号，所以这里使用的是js。根据个人习惯选择

1、编写语言配置文件

zh_CN.js

// 作为实例只写了一点
export default {
  home: {
    menu: {
      profile: '个人中心',
      changeSkin: '换肤',
      signOut: '退出登录'
    }
  }
}

2、安装vue-i18插件

# 安装 vue-i18
npm install vue-i18n -S-D

3、引入并使用vue-i18插件

这里采用分离配置的方式，即不在main.js中直接配置，新建i18n.js来配置。

【注意】

在使用 json作为语言配置文件的时候可以使用 require()语法引入，也可以使用 import引入，但如果是 js文件，要使用 imoprt引入才会生效

在i18n.js中配置

import Vue from 'vue'
// 引入并使用vue-i18n插件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 引入语言配置文件
import zh_CN from '@/language/zh_CN'

const i18n = new VueI18n({
  locale: 'zh_CN', //设置默认语言
  messages: {
    zh_CN, //zh_CN: zh_CN的简便写法
  }
})
export default i18n // 暴露i18n

4、在main.js中引入i18n并挂载到Vue实例

// 引入的时候双点好像是会失败 ../consig/i18n
import i18n from './config/i18n'

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>',
})

5、在需要配置语言的地方使用t函数

<el-dropdown-menu slot="dropdown">
  <el-dropdown-item icon="fa fa-user-circle">{{$t("home.menu.profile")}}</el-dropdown-item>
  <el-dropdown-item icon="fa fa-tachometer">{{$t('home.menu.changeSkin')}}</el-dropdown-item>
  <el-dropdown-item icon="fa fa-sign-out" divided>{{$t('home.menu.signOut')}}</el-dropdown-item>
</el-dropdown-menu>

6、效果图