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' 重置语言类型
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。