Vue 实现i18n国际化

Vue 实现i18n国际化

• npm install vue-i18n --save-dev
• 建立新文件夹和文件

内容符合格式即可,比如下例：

{
    "common":{
        "home": "系统首页",
        "user":"用户管理",
        "friends_invited":"邀请信息",
        "announcement_management":"公告管理",
		"user_count":"用户数量",
		"announcement_count":"公告数量",
		"inviter_count":"邀请数量",
        "homepage":"系统首页",
        "time":"发布时间",
        "title":"公告标题",
        "detail":"公告内容",
        "announcement_title":"公告标题",
        "user_account": "用户账号",
        "add_pic":"公告图片",
		"upload":"点击上传",
        "pic_limit":"只能上传jpg/png文件,且不超过2MB",
        "submit":"发布",
        "clear_all":"重置",
        "search": "搜索",
        "social_media_account": "社交帐号",
        "operate": "操作",
        "register_time": "注册时间",
        "user_name": "用户名",
        "statues": "状态",
        "edit": "编辑",
        "normal": "存在",
        "deleted": "已删除",
        "delete": "删除",
        "country": "国家",
        "inviter_email": "邀请者邮箱",
        "inviter_account": "邀请者用户名",
        "invitee_email": "被邀请者邮箱",
        "invitee_time": "邀请时间",
		"close_other":"关闭其他",
		"close_all":"关闭所有",
		"label_options":"标签选项",
		"last_log_in_time":"上次登录时间",
		"last_log_in_location":"上次登录地点",
		"exit":"退出登录"
    },
    "message":{
		"success":"success",
        "hint1": "请输入昵称",
        "hint2": "请输入账号",
        "hint3": "请输入密码",
        "hint4": "没有找到",
        "hin5": "没有账号？",
        "hint6": "马上注册",
        "hint7": "记住我",
        "hint8": "登录遇到问题？",
        "placeHolder1": "昵称",
        "placeHolder2": "用户名、手机号或邮箱",
        "placeHolder3": "密码（至少8位字符）"
    }
}

• 进行全局配置

main.js

‘zh’: require(’@/assets/language/zh.json’),
‘en’: require(’@/assets/language/en.json’)

这两块的地址就是第二步文件地址

// 引入i18n国际化插件
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/language/zh.json'),
    'en': require('@/assets/language/en.json')
  }
})

//将i18n注入到vue实例中
new Vue({
  el: '#app',
  router,
  i18n,
  render: h => h(App)
})

• 在组件中使用

$t(‘xxx’)或者 $t(“xxx”)就是使用json文件中内容的语法

<template>
  <div class="content">
    <span>{{ $t('common.home')}}</span>
    <span>{{ $t('common.name')}}</span>
    <span @click="changeLaguages()">切换语言</span>

  </div>
</template>

<script>
export default {
  data () {
    return {
      lang: 'zh'
    }
  },
  methods: {
     // 判断当前的语言环境 并切换
    changeLaguages () {
      console.log(this.$i18n.locale)
      let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
    }

  }
}
</script>