基于Vue、vue-i18n完成国际化（多语言）

2023年12月27日 250次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞