uniapp使用i18n插件实现多语言切换

项目场景：

uniapp中使用i18n插件实现页面中英文语言切换

步骤如下：

步骤解释：

• 引入i18n------创建i18n实例------通过Vue.use()进行注册；
• locale表示要切换的语言，zh显示中文，en显示的是英文；
• 实现中英文的切换，给按钮绑定点击事件，修改的就是locale的值为zh或en；
• zh和cn是自定义的名字，通过messages自定义；
• 新建文件夹lang，里面放两个文件夹为zh,en，里面的数据是自定义的，通过$t(‘’)调用里面的变量即可。
  

1、安装

通过npm安装i18n插件：npm install vue-i18n --save

2、配置

1、在main.js中进行配置

// #ifndef VUE3
import Vue from 'vue'
import App from './App'

// 1、引入多语言切换i18n
import VueI18n from 'vue-i18n'
import zh from './lang/zh/index.js'
import en from './lang/en/index.js'

// 2、使VueI18n
Vue.use(VueI18n)

Vue.config.productionTip = false

// 需要切换的语言包
const messages = {
	zh, // 中文
	en // 英文
}
// 3、创建i18n实例
const i18n = new VueI18n({
	// locale表示要切换的语言，zh显示中文，en显示的是英文
	locale: 'zh',
	messages
})
Vue.prototype._i18n = i18n    //这句放到App.mpType = 'app'的前面或者后面都不影响

App.mpType = 'app'

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

app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import App from './App.vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif

2、uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式，在当前页面写该计算属性，在页面进行数据显示时，可以使用$t(‘’)了：

computed: {
	i18n() {
		return this.$t('index')
	}
},

3、使用

// popup是zh和en文件中自定义的字段名
<view>{{$t('popup.title')}}</view>  

注：引入的zh和ch语言的文件内容如下
1、lang/zh/index.js

export default {
	form: {
		phone_email: '手机号/邮箱',
		password: '密码',
		message: '忘记密码',
	},
	btn: {
		submit: '登录',
		next: 'next'
	},
	popup: {
		title: '所属机构',
		complate: '完成'
	}
}

2、lang/en/index.js

export default {
	form: {
		phone_email: 'Phone number/email address',
		password: 'password',
		message: 'Forget the password',
	},

	btn: {
		submit: 'Log On',
		next: 'next'
	},
	popup: {
		title: 'Organization',
		complate: 'Done'
	}
}

例如：通过按钮控制语言的切换

// html
<button @click="toCN" type="warn">切换中文</button>
<button @click="toEn" type="primary">切换英文</button>

// js
methods:{
    // 中英文切换，通过locale的值来修改语言设置
	toCN() {
		this.$i18n.locale = "zh"
	},
	toEn() {
		this.$i18n.locale = "en"
	}
}