vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n
兼容性:
支持 Vue.js 2.x 以上版本
安装方法:(此处只演示 npm)
npm install vue-i18n
使用方法:
1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
2、准备本地的翻译信息
const messages = {
zh: {
message: {
hello: '好好学习,天天向上!'
}
},
en: {
message: {
hello: 'good good study, day day up!'
}
}
}
3、创建带有选项的 VueI18n 实例
const i18n = new VueI18n({
locale: 'en', // 语言标识
messages
})
4、把 i18n 挂载到 vue 根实例上
const app = new Vue({
router,
i18n,
...App
}).$mount('#app')
5、在 HTML 模板中使用
{ { $t("message.hello") }}
查看运行效果:
我们刚才选定的语言标识是 “en” 英语,现在改成 “zh” 中文,并查看效果
const i18n = new VueI18n({
locale: 'zh', // 语言标识
messages
})
这样就可以轻松实现国际化了,实际开发中,页面内容肯定是很多的,我们可以把对应语言的信息保存为不同的 json对象
const i18n = new VueI18n({
locale: 'en', // 语言标识
messages: {
'zh': require('./common/lang/zh&