☠️Vue国际化

对于一些跨国项目来说，国际化是尤为重要！

基本思路如下

1. 定义语言包：需要几种语言展示，就定义几个语言包
2. 创建对象，对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象
3. 创建 vue-i18n 类的对象，同时为其 messages 属性为第②步创建的对象，为其 locale 属性赋值为第②步中语言对象对应的 key
4. 在创建 Vue 实例对象时，挂载 vue-i18n 类的对象

具体步骤

1. 安装插件

npm i vue-i18n

1. 创建lang/index.js导入i18n并使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

1. 创建语言包对象

// 1、创建中文语言包对象
const zh = {
  username: '用户名',
  email: '邮箱',
  mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
  username: 'Username',
  email: 'Email',
  mobile: 'Mobile'
}

1. 组合语言包对象

const messages = {
  zh,
  en
}

1. 创建 i18n 实例

// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
  messages,
  locale: 'en'
})

1. 挂载对象