1.在main.js文件中引入：

方式1：

//main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
  locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
      'zh': require('./common/lang/zh'), // 中文语言包
      'en': require('./common/lang/en') // 英文语言包
  }
})
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  i18n,//挂载到实例，一定得在这个位置，而不是comonents中
  components: { App },
  template: '<App/>'
})

方式2：

//i18n.js
import VueI18n from 'vue-i18n';
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  cn: {
    message: {
      hello: '你好世界'
    }
  }
}
const i18n = new VueI18n({
  locale: 'cn', // set locale
  messages: messages , // set locale messages
});
export default i18n;

//main.js
import i18n from 'i18n.js';
Vue.use(iView, {
    i18n: (key, value) => i18n.t(key, value)
});
new Vue({
    router,
    i18n,
    store: store,
    render: h => h(App)
}).$mount('#app');

vue-i18n 数据渲染的模板语法

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>
 
//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>
 
//vue组件data中赋值的使用
data:{
 msg:this.$t('message.zh');
}

//js文件中赋值
import i18n from 'i18n.js';

console.log(i18n.t(text));