vue/uniapp项目进行国际化（中英文切换）

原理

就是先准备好每种语言的数据文件，当选中该语言时，就渲染该语言对应的数据文件

1.安装插件

需要使用 i18n 插件 i18n官方文档

npm 安装

npm install vue-i18n --save

2.准备每种语言的数据文件

注意：这两个文件的数据结构包括对象下的键名（key）都完全一样，只有 value 的值不一样
en.js（英文时需要的数据）

// en.js
export default {
	  index: {  
	    invite: 'Invite',  
	    game: 'Game'  
	  }
}

zh.js（中文时需要的数据）

// zh.js
export default {
	index: {  
	  invite: '邀请',  
	  game: '游戏'  
	}
}

3.在main.js 引入插件和语言文件 并做处理

import Vue from 'vue'
import App from './App'

import ZH from './locales/zh.js'
import EN from './locales/en.js'

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

const i18n = new VueI18n({  
  locale: 'zh-CN',  //默认选择的语言类型 这里默认中文
	messages: {
		'zh-CN': ZH,
		'en': EN
	}
})

Vue.prototype._i18n = i18n

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	i18n,
  ...App
})
app.$mount()

4.在页面渲染数据

我是在uniapp项目中演示的

<template>  
  <view class="uni-content"> 
  	<view>{{ this.$t('index.invite') }}</view>  
    <view>{{ this.$t('index.game') }}</view>   
    <view>{{ index.invite }}</view>  
    <view>{{ index.game }}</view>  
		<view class="" @click="change">
			切换
		</view>
  </view>  
</template>  

<script>  
export default {  
  computed: {  
  // 通过 this.$t('index') 获取之前第二步语言数据文件下的 index 对象
    index () {  
      return this.$t('index')  
    }  
  },
	methods: {
		change () {
			console.log(0)
			if(this._i18n.locale == 'zh-CN') {
				this._i18n.locale = 'en'
				return
			}
			else if(this._i18n.locale == 'en') {
				this._i18n.locale = 'zh-CN'
				return
			};
			
		}
	}
}  
</script>  

<style>  
</style>