Vue-i18n配置和使用

• 安装

npm install vue-i18n -D

• 在src下新建文件i18n.js
  添加如下:

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

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'CN',
  messages: {
    'CN': require('./assets/lang/cn'),
    'EN': require('./assets/lang/en')
  }
})

• 在assets下新建文件夹lang
• 在lang下新建文件en.js和cn.js
  在en.js下添加如下:

export const message = {
  hello: 'Hello, World'
}

在cn.js下添加如下:

export const message = {
  hello: '你好, 世界'
}

• 在main.js里引入i18n.js

import Vue from 'vue'
import App from './App'
import router from './router'
import { i18n } from './i18n'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})

• 使用

<span>{{ $t("message.hello") }}</span>