Vue使用VueI18n国际化

1.安装VueI18n

npm install vue-i18n --save-dev

2.定义好国际化文件 index.js

import hk from './zh-HK' import cn from './zh-CN' const messages = { hk: { message: hk }, cn: { message: cn } } export default messages

zh-CN.js

const message = { connected: '已连接' } export default message

zh-HK.js

const message = { connected: '已鏈接' } export default message

3.在main.js中引入VueI18n和message文件

import VueI18n from 'vue-i18n' import messages from './assets/lang/index' Vue.use(VueI18n) const i18n = new VueI18n({ // 义默认语言 locale: 'cn', messages }) new Vue({ router, i18n, store, render: h => h(App) }).$mount('#app-box')

4.在vue项目中

更改this.$i18n.locale = ‘cn’或者this.$i18n.locale =‘hk’就可以切换语言， 标签中使用 {{ $t("message.connected") }} 可以显示对应的中文，this.$t("message.connected") 可以在js中引用对应的中文。