前端项目国际化-vue+vue-i18n

vue + vue-i18n

1.首先在main.js引入vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n);

2.然后引入语言包

const i18n = new VueI18n({
  locale: 'CN',    // 语言标识
  messages: {
    'CN': require('./assets/common/lang/zh.js'),   // 中文语言包
    'EN': require('./assets/common/lang/en.js')    // 英文语言包
  },
})
//语言包里可以如下定义
export const  message= {  //必须有导出export，另外两份语言包里面的定义结构要相同
    form:"switch the language",
    user:"userName",
    tel: "telephone",
    ID: "ID Number",
    button1:"search",
    button2: "reset",
}

3.将i18n 挂载到vue实例对象上

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

4.在需要的组件里引用,例如

如果此篇对你没有帮助，可以到这个地址查阅： https://segmentfault.com/a/1190000009058572