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

项目场景:

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

步骤如下:

步骤解释:

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

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"
	}
}

你可能感兴趣的:(uni-app,javascript,前端)