简单实现前端国际化

前端国际化、语言切换、js国际化、国际化

宅客技术对接

925人浏览 · 2022-12-09 11:57:04

宅客技术对接 · 2022-12-09 11:57:04 发布

第一步：新建 language-util.js

(function(){
	const languageType = ["EN","ES","ZH"];
	//获取URL参数
   	function getUrlParam(name) {
        var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null)
            return unescape(r[2]);
        return null; // 返回参数值
    }
   	
   	//获取当前项目地址
   	function getRootPath(){
		var curWwwPath=window.document.location.href;
		if(curWwwPath.indexOf("http") < 0){
			return curWwwPath.substr(0,curWwwPath.lastIndexOf("/")+1);
		}else{
			var pathName=window.document.location.pathname;
			var pos=curWwwPath.indexOf(pathName);
			var localhostPaht=curWwwPath.substring(0,pos);
			var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
			return(localhostPaht+projectName+"/");
		}
	}
   	
    var ua = navigator.userAgent,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua))|| (isAndroid && !/(?:Mobile)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
   	
   	
   	var lang = getUrlParam("lang");
   	if(!lang){
   		lang = sessionStorage.getItem("zk_lang_type");
   	}else{
        sessionStorage.setItem("zk_lang_type",lang);
    }
   	lang = lang ? lang : "ZH";
   	lang = languageType.indexOf(lang.toUpperCase()) != -1 ? lang.toUpperCase() : "";
 	var filePath = getRootPath() + "i18n/lang/";
 	//手机端显示
   	if(!isTablet&&!isPc){
		//默认显示中文
	   	var langType = "language_mobile_zh.js";
	   	if(lang.toUpperCase() == "EN"){
	   		langType = "language_mobile_en.js";
	   	}else if(lang.toUpperCase() == "ES"){
	   		langType = "language_mobile_es.js";
	   	}
   	}else{
	   	//默认显示中文
	   	var langType = "language_zh.js";
	   	if(lang.toUpperCase() == "EN"){
	   		langType = "language_en.js";
	   	}else if(lang.toUpperCase() == "ES"){
	   		langType = "language_es.js";
	   	}
   	}
   	filePath += langType;
   	
   	//动态引用指定js
   		document.write("<script src='"+filePath+"?v="+new Date().getTime()+"'></script>")
})()

第二步：在项目根目录下增加国际化描述文件，例如：在根目录下新建 i18n/lang/文件夹，在文件夹下新增描述文件 language_zh.js

const zk_i18n = { 
   page_title: '页面名称',
}

新增英文描述文件 language_en.js

const zk_i18n = { 
   page_title: 'page name',
}

第三步：页面引用 language-util.js即可

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="color-scheme" content="light dark">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
        <title></title>
		<link rel="stylesheet" href="css/comm.css" />
		<script src="js/libs/vue@2.6.11.js"></script>
		<script src="js/libs/vue-resource.min.js"></script>
        <script type="text/javascript" src="js/language-util.js"></script>
	</head>
	<body>
		<div id="app">
           
		</div>
		<script>
			var that = null;
			var app =  new Vue({
				el: '#app',
				data:{
					
				},
				mounted:function(){
					 that = this;
                     document.title = zk_i18n.page_title;					
				},
				 methods:{}
			})
		</script>
		
	</body>
</html>

总结：到这里使用js做前端国际化就完成了是不是很简单，当需要切换语言时，在打开页面地址后加上 &lang=en 就能换成英文页面。例：http:localhost:8080/index.html&lang=en

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模