国际化插件vue-i18n的简单使用

安装

在vue项目中安装vue-i18n:
npm

npm/cnpm install vue-i18n

yarn

yarn add vue-i18n

使用

在vue项目中使用vue-i18n：
main.js

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

const i18n = new VueI18n({
	locale: 'zh',
	messages: {
	   'zh': require('@/assets/lang/zh.js').lang,
	   'en': require('@/assets/lang/en.js').lang
	 }
})

new Vue({
  ......
  i18n,
  render: function (h) { return h(App) }
}).$mount('#app')

在assets目录下创建zh.js和en.js(看你喜欢建在那个目录下)
zh.js

export const lang = {
    login: '登录',
    register: '注册',
    rember: '记住密码',
    ......
}

en.js

export const lang = {
    login: 'login',
    register: 'register',
    rember: 'rember',
    ......
}

最后，在试图上展示
index.vue

<template>
  <div class="home">
     <button @click="change('zh')">中文</button>
     <button @click="change('en')">英文</button>
     <div>
     	{{$t('login')}} {{$t('register')}} {{$t('rember')}}
     </div>
  </div>
</template>

export default{
	methods: {
	    change(value){
	      this.$i18n.locale = value;
	    }
    }
}