vue-i18n.js在h5中的使用

偏执的太偏执、 2023-06-29 07:26 8阅读 0赞

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

**第二步**

<div>{
       {$t("message.title")}}</div>
    
    <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
    }

**给个项目的效果**  
中文状态下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
英文状态下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]  
在用到数据里**例如title:this.$t(‘message.data’)的时候，切换语言则不会发生语言转换，（由于 JavaScript 的限制，Vue 不能检测当前变动的数组，只渲染一次）。  
我是用把语言储存本地，然后在获取来进行实现的。切换语言的时候，把切换的语言储存到本地，然后刷新页面并获取储存到本地的数据。  
在apicloud中用api来获取locale:api.getPrefs(\{sync: true, key: key \})**

具体了解可以查看[vue中如何使用i18n实现国际化][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：吃藕请忽略）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 2]  
点击切换语言后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 3]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200111140153240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200111140232206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70
[vue_i18n]: https://segmentfault.com/a/1190000016445415
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200111142422413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020011114243633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70