基于Vue、vue-i18n实现国际化（多语言）

2024年3月30日 194次阅读 来源: will

vue-i18n官网 https://kazupon.github.io/vue…

项目用vue-cli构建，用到vue全家桶及webpack、iview。

1、在main.js中引入vue-i18n.

import VueI18n from 'vue-i18n'
vue调用第三方插件
Vue.use(VueI18n)

2、新建一个vue-i18n对象

const i18n = new VueI18n({
  // 默认语言
  locale: LangCongig.DEFAULT_LANG,
  messages: LangCongig.LOCALES
})

3、配置语言选项

LangCongig是一个配置语言包文件和语言选项的js文件，文件内容大致如下：
// LangCongig.js
import IviewLangs from './iviewLangs'

// 语言包列表, 合并语言包
const locales = {
  'cn': Object.assign(require('../lang/cn'), IviewLangs.zh_CN),
  'en': Object.assign(require('../lang/en'), IviewLangs.en_US)
}
export default {
  DEFAULT_LANG: setup(),
  LOCALES: locales
}
setup是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据navigator判断是中文还是非中文，非中文则显示英语。
IviewLangs是iview的语言包配置，即我们定义的语言与iview显示的要一致，比如时间选择器的显示。
// IviewLangs.js
import zhCN from 'iview/dist/locale/zh-CN' // 简体中文
import enUS from 'iview/dist/locale/en-US' // 英文

export default {
  zh_CN: zhCN,
  en_US: enUS
}
require('../lang/cn')这个是我们自定义的中文语言包，格式如下：
// cn.js
module.exports = {
  language: '语 言',
  chinese: '中文'
}
// en.js
module.exports = {
  language: 'language',
  chinese: 'Chinese'
}

4、添加到new Vue选项里

let vm = new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

5、如何调用

在页面调用：<span>{{$t('language')}}</span>
在js中调用：this.$t('language')

6、切换语言

1）把语言保存起来，以便退出或刷新时加载后还是当前选择的语言，一般存在cookie里
2）this.$i18n.locale = 'en' 重置语言类型
    原文作者：will
    原文地址: https://segmentfault.com/a/1190000017762753
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞