vue-i18n.js在h5中的使用

最新推荐文章于 2024-05-03 15:27:23 发布

空&白

最新推荐文章于 2024-05-03 15:27:23 发布

阅读量1.4k

点赞数 2

分类专栏： js h5

本文链接：https://blog.csdn.net/qq_32707555/article/details/103935878

版权

js 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

说明：该文章描述的是vue-i18n.min.js（多语言切换）在apicloud中的使用，基于vue.js
第一步 引入js
需要引入的js有

<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/vue-i18n.min.js"></script>

第二步

<!-- html中的使用方法 {{$t("message.xxx")}}-->
<div>{{$t("message.title")}}</div>
<!-- html中，input的使用方法 $t('message.xxx')-->
<input type="text" name="" value="" :placeholder="$t('message.placeholder')">
<script type="text/javascript">
var vm;
apiready = function() {//apiready 这个是apicloud的api
	const i18n = new VueI18n({
		locale: 'cn',//设置语言
		messages: {
 			en: {//英文
 				message: langEn()//从其他js返回的语言包（根据项目自己手写）
			},
			cn: {//中文
				message: langCn()
			}
		}
	})
	vm = new Vue({
		el: '#app',i18n,//i18n这个必须要加，不然执行不了
		data:function(){
			return{
				title:this.$t('message.data')//js中的使用方法this.$t('message.xxx')
			}
		},
		methods:{
			//js执行切换语言
			changeLan(){
				i18n.locale='en'
			}
		}
		...
	})
}

</script >

引入的js语言（自己手动写）

langEn()和langCn()是引入js的方法
function langCn(){
	var cn={
		"title":"这是标题",
		...
	}
	return cn
}
function langEn(){
	var en={
		"title":"This is title",
		...
	}
	return en
}

给个项目的效果
中文状态下
在这里插入图片描述
英文状态下

在用到数据里例如title:this.$t(‘message.data’)的时候，切换语言则不会发生语言转换，（由于 JavaScript 的限制，Vue 不能检测当前变动的数组，只渲染一次）。
我是用把语言储存本地，然后在获取来进行实现的。切换语言的时候，把切换的语言储存到本地，然后刷新页面并获取储存到本地的数据。
在apicloud中用api来获取locale:api.getPrefs({sync: true, key: key })

具体了解可以查看vue中如何使用i18n实现国际化

然后刚才在h5运用了，也是可以实现的（没有框架，纯div+css+js）
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>测试i18n</title>
	<style>
		.btn {
			margin-top: 30px;
			width: 150px;
			height: 50px;
			border-radius: 50px;
			background: red;
			color: #fff;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div>{{$t("message.title")}}</div>
		<input type="text" :placeholder="$t('message.placeholder')">
		<p>{{data}}</p>
		<div class="btn" @click="change">点我切换语言</div>
	</div>
	<script src="vue.js"></script>
	<script src="vue-i18n.min.js"></script>
	<script>
		const i18n = new VueI18n({
			locale: 'cn',
			messages: {
				cn: {
					message: {
						"title": "这是一个标题",
						"placeholder": "我在哪？",
						"data": "我是数据"
					}
				},
				en: {
					message: {
						"title": "This is title",
						"placeholder": "Where am I ?",
						"data": "I am data"
					}
				}
			}
		})
		var vm = new Vue({
			el: '#app',
			i18n,
			data: function () {
				return {
					data: this.$t('message.data')
				}
			},
			methods: {
				change() {
					i18n.locale = 'en'
				}
			}
		})

	</script>
</body>

</html>

效果图（ps：吃藕请忽略）
在这里插入图片描述
点击切换语言后

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！

空&白

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue-i18n.js在h5中的使用

说明：该文章描述的是vue-i18n.min.js（多语言切换）在apicloud中的使用，基于vue.js第一步引入js需要引入的js有<script type="text/javascript" src="./script/vue.js"></script><script type="text/javascript" src="./script/vue...
复制链接

扫一扫