Vue安装VueI18n实现项目国际化

Vue安装VueI18n实现项目国际化

文档地址

Vue I18n

1、安装VueI8n

我是Vue2.x vue-cli所以命令时

npm install vuei18n

2、创建i18n文件

先引入并且在Vue中注册这个插件

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

3、完整的i18n文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)


import ENMessage from './message_en'

const message = {
    en:ENMessage,
    ja: {
        message: {
            hello: 'こんにちは、世界'
        }
    }
};

export default new VueI18n({
    locale: 'en',
    messages:message
});

4、在main.js中引入

import i18n from './i18n/index.js'

new Vue({
  render: h => h(App),
  router,
  i18n,
  store,
}).$mount('#app')

5、在Vue模板文件中使用

<div slot="center">
  {{$t('message.shopping')}}
</div>

6、遇到的问题

我之前所有步骤与流程都对了，但是我把里面的messages写成了一个结构的属性message,
所以当我去console.log这个i18n这个对象的时候发现里面对应的属性messages一直为空，控制台也一直提醒
说解析不了，所以还是需要注意这些细节啊

new VueI18n({
    locale: 'en',
    messages:message
});