vue 使用VueI18n进行国际化

安装

npm install vue-i18n

引用

新建common文件夹

common:{
	lang:{
		zh.js//中文包
		en.js//英文包
	}
	index.js
}

语言包JS

//中文
export const m = {
	login:{
		title:'登录'
	}
}

//英文
export const m = {
	login:{
		title:'Login'
	}
}

common/index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
Vue.use(VueI18n) // 通过插件的形式挂载
 


export const i18n = new VueI18n({
    locale: localStorage.getItem('LANG') || 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./lang/zh.js'),   // 中文语言包
      'en-US': require('./lang/en.js')    // 英文语言包
    }
})

引入

main.js

import { i18n } from './common'


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

使用

	langTap(){
           const ch = localStorage.getItem('LANG')
           if(ch == 'zh-CN'){
               this.$i18n.locale = 'zh-CN'
               localStorage.setItem('LANG','zh-CN')
           }else{
               this.$i18n.locale = 'en-US'
               localStorage.setItem('LANG','en-US')
           }
       },

页面使用

<p>{{$t('m.login.title')}}</p>

<input type="text" :placeholder="$t('m.login.title')">

最后附上官方文档CallApp