Vue + i18n实现国际化

首先，介绍下项目结构，如图：

1.在i18n/lang下编写json文件。

//zh_CN.json
{"message":{"hello": "关于"}}
//en.json
{"message":{"hello": "about"}}

2.i18n/index.js 国际化配置文件

import VueI18n from 'vue-i18n'//需先安装vue-i18n
import Vue from 'vue'

Vue.use(VueI18n)

var langMessages = {
 cn: require('./lang/cn.json'),
 en: require('./lang/en.json')
}
var i18n = new VueI18n({
  locale: 'cn',
  messages: langMessages
})
export default i18n

3.main.js中引入i18n以及配置文件

import i18n from './i18n' //引入配置文件

new Vue({
    el: '#app',
    router,
    i18n: i18n,   //实例中 引用国际化
    template: '<App/>',
    components: { App },
});

/*
//1s后更改语言
setTimeout(function(){
    i18n.locale = "en"
},1000)
*/

4.在html中应用

//建议此方法
<span v-text="$t('message.hello')"></span>
//or
<p>{{ $t("message.hello") }}</p>