uniapp实现il8n中英文切换

1.和pages同级粘贴文件夹locale，里面有zh.json，en.json，index.js

(1)zh.json

{
	"locale.auto": "系统",
	"locale.en": "English",
	"locale.zh": "简体中文",
	
	"index.title": "Hello i18n",
	"index.home": "主页",
	"index.component": "组件",
	"index.api": "API",
	"index.schema": "Schema",
	"index.demo": "uni-app 国际化演示",
	"index.demo-description": "包含 uni-framework、manifest.json、pages.json、tabbar、页面、组件、API、Schema",
	"index.detail": "详情",
	"index.language": "语言",
	"index.language-info": "语言信息",
	"index.system-language": "系统语言",
	"index.application-language": "应用语言",
	"index.language-change-confirm": "切换语言需要重下刷新当前页面",
	"api.message": "提示",
	"schema.name": "姓名",
	"schema.add": "新增",
	"schema.add-success": "新增成功"
}

(2)en.json

{
  "locale.auto": "System",
  "locale.en": "English",  
  "locale.zh": "简体中文",
  
  "index.title": "Hello i18n",
  "index.home": "Home",
  "index.component": "Component",
  "index.api": "API",
  "index.schema": "Schema",
  "index.demo": "uni-app globalization",
  "index.demo-description": "Include uni-framework, manifest.json, pages.json, tabbar, Page, Component, API, Schema",
  "index.detail": "Detail",
  "index.language": "Language",
  "index.language-info": "Settings",
  "index.system-language": "System language",
  "index.application-language": "Application language",
  "index.language-change-confirm": "Switching languages requires refreshing the current page again",
  "api.message": "Message",
  "schema.name": "Name",
  "schema.add": "Add",
  "schema.add-success": "Add success"
}

(3)index.js

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

import en from './en.json'
import zh from './zh.json'

const messages = {
	en: en,
	zh: zh
};

const i18n = new VueI18n({
	locale: 'zh', // set default locale
	messages, // set locale messages
});

export default i18n;

2.main.js

import Vue from 'vue'
import App from './App.vue';
import i18n from './locale/index.js';
 
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

3.pages/index/index.vue

<view class="index">
     <view style="width: 80rpx;height: 60rpx; text-align: center;background-color: #808080;color:#fff;line-height: 120rpx;" @click="changeLanguage('zh')" v-if="locale=='en'">Chinese</view>
	<view style="width: 80rpx;height: 120rpx; text-align: center;background-color: #808080;color:#fff;line-height: 60rpx;" @click="changeLanguage('en')" v-else>英文</view>

    <view>{{$t('schema.name')}}</view>
	<input class="input" v-model="name" />
</view>


<script>
export default {
    data() {
		return {
			locale: 'zh'
        }
    },
    methods:{
        changeLanguage(lang) {
			this.$i18n.locale = lang;
			this.locale = lang
	    },
    }
}