国际化:i18n实现多语言

前言

如果项目需要多语言的支持，我们需要做国际化,
使用 vue-i18n 来实现多语言的界面.
这次实测环境是vue3版本

安装

1
npm install vue-i18n --save

关于语言包，我们有几种方式，一种是每个语言包一个独立的js放到项目里， 或者将语言的对照写在 .vue 文件里， 或者加载远程的JSON语言包
我们的后台界面需要支持的语言通常不多，更新也不会非常的频繁，所以我们将语言包放在项目里，规划项目目录，增加 lang 目录来存放语言对照

配置及引入

main.js

1
2
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
1
2
3
4
5
6
7
8
const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'),   // 中文语言包
    'en-US': require('./common/lang/en')    // 英文语言包
  }
})
{2}
1
2
3
4
5
6
new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

相关数据的存储

src文件夹下创建common文件夹,common下创建lang文件夹,
lang文件夹下创建en.js和zh.js存放数据

结构图示

其中数据结构分别如下:

en.js:

1
2
3
4
5
export const m = {
  index: 'Index',//首页
  about: 'About',//关于
  productions: 'Productions'
}

zh.js:

1
2
3
4
5
export const m = {
  index: '首页',
  about: '关于',
  productions: '产品'
}

组件中的使用

1
this.$i18n.locale = 'zh-CN'; //值是main.js中定义的messages下的值.