1.项目文件及目录
2.准备js
github下载地址：https://github.com/T-baby/jquery.i18n/releases
3.页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>i18n-json数据切换中英文</title>
</head>
<body>
<span i18n="login.username">账号：</span><input type="text" name="" i18n="login.enter_user" placeholder="请输入账号">
<br />
<span i18n="login.password">密码：</span><input type="password" name="" i18n="login.enter_pass" placeholder="请输入密码">
<br />
<select id="changeLanguage">
<option i18n="login.choice_langu">请选择语言</option>
<option i18n="login.ch">中文</option>
<option i18n="login.en">英语</option>
</select>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.i18n.min.js"></script>
<script type="text/javascript">
$(function(){
defaultLanguage();
})
var langStr="cn";
function defaultLanguage(){
// alert(langStr);
$("[i18n]").i18n({
defaultLang: langStr,
filePath: "./i18n/",
filePrefix: "i18n_",
fileSuffix: "",
forever: true,
callback: function(res) {}
});
}
$('#changeLanguage').change(function(){
var language=$('#changeLanguage option:selected').val();
if(language=="英语" || language=="English"){
langStr="en";
}else{
langStr="cn";
}
defaultLanguage();
});
</script>
</body>
</html>
4.json数据
中文：i18n_cn.json
{
"login.username":"账号：",
"login.password":"密码：",
"login.enter_user":"请输入账号",
"login.enter_pass":"请输入密码",
"login.choice_langu":"请选择语言",
"login.ch":"中文",
"login.en":"英语"
}
英文数据：i18n_en.json
{
"login.username":"username:",
"login.password":"password:",
"login.enter_user":"Please enter your username",
"login.enter_pass":"Please enter your password",
"login.choice_langu":"Please select a language",
"login.ch":"Chinese",
"login.en":"English"
}
5.注意事项
a.如果只是静态文件会报如下错误，告诉我们访问数据时需要加载服务器资源，纯静态页面建议使用Hbuilder web服务器方式运行
~~~~直接访问file:///D:/Users/Administrator/Desktop/i18nDemo/index.html文件报错
jquery.js:4 Access to XMLHttpRequest at 'file:///D:/Users/Administrator/Desktop/i18nDemo/i18n/i18n_cn.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
~~~~Hbuilder本地服务器方式正常：http://127.0.0.1:8020/i18nDemo/index.html?__hbt=1563420319456
b.i18n参数详解
defaultLang
defaultLang: defaultLang,
默认语言名称，插件会自动将 filePrefix+defaultLang+fileSuffix 拼接在一起作为语言文件文件名。
filePath
filePath: "/i18n/",
该参数指定了语言文件所在文件夹在项目中的位置。
filePrefix
filePrefix: "i18n_",
该参数指定了语言文件的命名的前缀。
fileSuffix
fileSuffix: "",
该参数指定了语言文件的命名的后缀。
callback
callback:function(){
//do something
}
6.参考文章：https://juejin.im/entry/58774b70b123db005dd49e62
7.其他方案（四种方式实现前端国际化）：https://blog.csdn.net/qq_41485414/article/details/81093999