vue使用i18n实现国际化

第一步：安装vue-i18n

npm install vue-i18n

第二步：创建一个js文件，用于初始化和挂载i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 挂载
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.getItem('languagecode') || 'zh',
  messages: {
    zh: {},
    en: {},
    ar: {}
  }
})

export default i18n

第三步：在main.js中引入上述js文件并加载到windows上

import i18n from './utils/i18ninit'
Vue.config.productionTip = false
window.app = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

使用：

//1.在控件属性中使用
:label="$t('trainbudget.lable.year')"
//2.在控件中使用
{{ $t('currency.button.save') }}
//3.在js中使用
this.$t('currency.message.checkinput')