vue 后台翻译_前端使用vue-i18n做中英文翻译

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&