vue-i18n多语言国际化实践

最新推荐文章于 2024-07-03 12:01:14 发布

Nobita Chen

最新推荐文章于 2024-07-03 12:01:14 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发笔记 VUE 文章标签： js ajax vue-i18n

本文链接：https://blog.youkuaiyun.com/chenxiong103/article/details/112133118

笔记同时被 3 个专栏收录

28 篇文章

订阅专栏

前端开发

27 篇文章

订阅专栏

VUE

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.22.1/vue-i18n.min.js"></script>
</head>
<body>

<div id="app">
  <p>{{ $t("T2") }}</p>
  <ol>
  	<li>{{ $t("T3") }}</li>
  	<li>{{ $t("T4") }}</li>
  	<li>{{ $t("T5") }}</li>
  	<li>{{ $t("T6") }}</li>
  	<li>{{ $t("T7") }}</li>
  	<li>{{ $t("T8") }}</li>
  	<li>{{ $t("T9") }}</li>
  </ol>

  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :value="lang">{{ lang }}</option>
    </select>
  </div>

</div>
<script>
// 判断url地址中是否包含link字符串
function checkurl(str) {
	var url = window.location.href;
	if(url.indexOf(str) >= 0 ) {
		return 1;
	}else{
		return 0;
	}
}

// 准备翻译的语言环境信息
$.ajax({url:'http://e945.net/index.php?c=api&a=getlanglist&cid=1&jsoncallback=?', async:false, dataType:'jsonp', jsonp:'jsoncallback', success: function (jsonp) {
		const messages = jsonp;

		var locale = 'zh';
		if(checkurl('zh-cn')) locale = 'zh';
		if(checkurl('en')) locale = 'en';
		if(checkurl('kor')) locale = 'kor';
		if(checkurl('jp')) locale = 'jp';

		// 通过选项创建 VueI18n 实例
		const i18n = new VueI18n({
		  locale: locale, // 设置地区
		  messages: messages
		})

		new Vue({
			i18n: i18n, 
			messages: messages,
			el: '#app',
			data: {
				langs: ['zh', 'en', 'kor', 'jp'],

			},
		  created: function(){
		            // this.request();
		        },
		  methods:{
		      request:function(){
		          //发送get请求
		          this.$http.get('vue-i18n/language-all.json').then(function(res){
		              console.dir(res.body);
		              return res.body;    
		          },function(){
		              console.log('请求失败处理');
		          });
		      }
		  },
		  mounted: function(){

		  }

		})

	},
	beforeSend:function(){$('body').append('<div id="nobita-loading" style="background-color:#E74C3C;width:100%;height:100%;text-align:center;position:absolute;top:0;line-height:300px;"><img src="http://samherbert.net/svg-loaders/svg-loaders/three-dots.svg" width="60"></div>');},
	complete: function(XMLHttpRequest, textStatus){
    	$('#nobita-loading').remove();
    },
    //调用出错执行的函数
    error: function(){
        alert('数据加载失败');
    }

});

</script>

</body>
</html>