vue-i18n.js在h5中的使用
程序员文章站
2022-07-12 13:18:37
...
说明：该文章描述的是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：吃藕请忽略）
点击切换语言后
最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！