七.国际化

前言

国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用，在 vue 中我们使用 i18n 这个插件来实现项目的国际化功能。

1.Vue 相关配置

main.js

import i18n from "./i18n"
new Vue({
  router,
  i18n,
  store,
  render: (h: Function) => h(App),
}).$mount("#app")

2.i18n 配置规则

/i18n/index.js

import Vue from "vue"
import VueI18n from "vue-i18n"
import cn_ZH from "./cn"
import en_US from "./en"
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.getItem("lang") || "cn_ZH", // 语言标识
  messages: {
    cn_ZH, // 中文语言包
    en_US, // 英文语言包
  },
})

export default i18n

3.语言配置

/i18n/cn_ZH.js

export default {
  resume: "个人简历",
  aboutMe: "关于我",
  frontEndSkill: "前端技能",
  worksShow: "作品展示",
  myExperience: "我的经历",
  linkMe: "联系我",
  leaveMessage: "留言板",
}

/i18n/en_US.js

export default {
  resume: "resume",
  aboutMe: "about me",
  frontEndSkill: "front end skill",
  worksShow: "works show",
  myExperience: "my experiece",
  linkMe: "link me",
  leaveMessage: "leave message",
}

总结

通过以上流程可以看出插件的基本原理就是：前端组件通过 i18n 依据 语言环境 + 目标索引 为条件到相关目录下的配置文件中（如：/i18n/cn_ZH.js）通过索引拿到相关的目标字段。