Vue（三十三）国际化解决方案
摘自：https://blog.csdn.net/qq_41485414/article/details/81093999
（1）第一种方式：中英文两套页面
优点：技术含量最低
缺点：占内存，响应慢，麻烦
（2）第二种方式：谷歌插件
优点：简单快捷，利用谷歌翻译
缺点：翻译不完全准确，而且有谷歌的搜索栏，不是很好
实现方法：
<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
<script>
function googleTranslateElementInit() { new google.translate.TranslateElement(
{
//pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element'
); }
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
（3）第三种方式：插件translate.js
优点：简单
缺点：不适合大型网站
实现方法：
https://wangchujiang.com/translater.js/
在页面上出现中文的地方写上中文和英文两种注释，然后通过切换来达到翻译页面的目的（Jquery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/translater.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
button{margin-top: 1rem;}
span{margin-top: 1rem;color: crimson;}
div{margin-top: 1rem;}
a{margin-top: 1rem;}
input{margin-top: 1rem;}
</style>
<body>
<span>
切换语言：
<!--{cn}切换语言：-->
<!--{en}switch the language：-->
</span>
<a href="javascript:tran.setLang('en');">English</a>
<a href="javascript:tran.setLang('cn');">中文</a>
<select name="language" id="languager">
<option value="chinese">
中文
<!--{cn}中文-->
<!--{en}Chinese-->
</option>
<option value="english">
英文
<!--{cn}英文-->
<!--{en}English-->
</option>
</select><br />
<span>
按钮：
<!--{cn}按钮：-->
<!--{en}button：-->
</span>
<button id='btn-addAlarmToEvent' type="button" class="btn btn-success">删除
<!--{cn}删除-->
<!--{en}delete-->
</button><br /><br /> <span>
段落：
<!--{cn}段落：-->
<!--{en}paragraph：-->
</span>
<p>这是一段话
<!--{cn}这是一段话-->
<!--{en}This is a word-->
</p><br /> <div id="test">
<span>
层级：
<!--{cn}层级：-->
<!--{en}tier：-->
</span>
这是一个层级
</div><br />
<span>
另一个层级：
<!--{cn}另一个层级：-->
<!--{en}other tier：-->
</span>
<div id="test1"> </div><br />
<span>
超链接：
<!--{cn}超链接：-->
<!--{en}href：-->
</span>
<a href="">
点击测试
<!--{cn}点击测试-->
<!--{en}click Test-->
</a><br />
<span>
超链接：
<!--{cn}超链接：-->
<!--{en}href：-->
</span>
<!--第三种写法的，将语种作为参数传递-->
<a href="test.html?lang=jp">
点击进日语
<!--{cn}点击进入日语-->
<!--{en}click into jp-->
</a>
<span>
输入框：
<!--{cn}输入框：-->
<!--{en}input：-->
</span>
<!--这个怎么实现切换语言我没解决-->
<input type="submit" id="tj" name="" value="提交" />
<input type="button" name="an" id="" value="这是一个按钮" />
</body>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 初始化翻译的js，第一种写法，用href链接切换语种 */
var tran = new Translater({
});
/* 第二种用法，其实都是一样，都是将默认的语种改为用户需要的语种 */
$('#test').append("<!--{cn}这是一个测试--><!--{en}This is a test-->");
$('#test1').text("这是层级的另一种写法").append("<!--{cn}这是层级的另一种写法--><!--{en}This is another way of writing the tier-->")
$("#languager").on("change", function(e){
var language=$(this).val();
if(language=="chinese"){
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('cn');
var tran = new Translater({
lang:"cn"
});
}else{
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('en');
var tran = new Translater({
lang:"en"
});
}
});
</script>
</html>
（4）第四种方式：i18N
优点：响应快，适合大中小型网站
缺点：麻烦，难点多
实现方法：vue可以使用elementui实现
http://element-cn.eleme.io/#/zh-CN/component/i18n
Vue（三十三）国际化解决方案的更多相关文章
- COJ967 WZJ的数据结构（负三十三）
WZJ的数据结构(负三十三) 难度级别:C: 运行时间限制:7000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大 ...
- NeHe OpenGL教程 第三十三课：TGA文件
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- COJ 0967 WZJ的数据结构（负三十三）
WZJ的数据结构(负三十三) 难度级别:E: 运行时间限制:7000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大 ...
- 三十三、Java图形化界面设计——布局管理器之null布局（空布局）
摘自http://blog.csdn.net/liujun13579/article/details/7774267 三十三.Java图形化界面设计--布局管理器之null布局(空布局) 一般容器都有 ...
- JAVA之旅（三十三）——TCP传输，互相（伤害）传输，复制文件，上传图片，多并发上传，多并发登录
JAVA之旅(三十三)--TCP传输,互相(伤害)传输,复制文件,上传图片,多并发上传,多并发登录 我们继续网络编程 一.TCP 说完UDP,我们就来说下我们应该重点掌握的TCP了 TCP传输 Soc ...
- Gradle 1.12用户指南翻译——第三十三章. PMD 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
- “全栈2019”Java多线程第三十三章：await与signal/signalAll
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- “全栈2019”Java第三十三章：方法
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 孤荷凌寒自学python第三十三天python的文件操作初识
孤荷凌寒自学python第三十三天python的文件操作初识 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天开始自学python的普通 文件操作部分的内容. 一.python的文件打开 ...
随机推荐
- GDAL create kml
新增kml 点 public void WriteKmlPiont() { string driverName = "KML"; //MapInfo File OSGeo.GDAL ...
- POI操作excle
将根目录下的poi-3.6-20091214.jar和Lib目录下三个通用包 commons-logging-1.1.jar junit-3.8.1.jar log4j-1.2.13.jar拷贝到项目 ...
- 多个python版本共存
windows下多个python版本共存 了解python的人都知道python有2.x版本和3.x版本,而python3.x版本不向下兼容,但是根据具体的需要,有时候要2.x和3.x共存,pytho ...
- @PostConstruct和@PreDestroy注解
从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...
- Python——字符串2.0（实验）
直接打s,是程序员看到的:打print(),是用户看到的 列表 ] #列表索引,与数组唯一不同:等号左端可修改
- django-auth组件
auth组件 一.auth模块简介 auth模块是django自带的用户认证模块,包含了身份验证和权限管理两部分. 身份验证用于核实某个用户是否合法,权限管理用于决定一个合法用户有哪些权限 默认情况下 ...
- 洛谷P4774 [NOI2018]屠龙勇士 [扩欧，中国剩余定理]
传送门 思路 首先可以发现打每条龙的攻击值显然是可以提前算出来的,拿multiset模拟一下即可. 一般情况 可以搞出这么一些式子: \[ atk_i\times x=a_i(\text{mod}\ ...
- SignalR在Asp.NetCore中的使用
SignalR简介 ASP.NET SignalR是为ASP.NET 开发人员提供的一个库,旨在为你的Web应用迅速简便的添加实时通信功能.这个Web通信功能是指:客户端可以实时从服务端代码拉取数据, ...
- OpenCV-Python：K值聚类
关于K聚类,我曾经在一篇博客中提到过,这里简单的做个回顾. KMeans的步骤以及其他的聚类算法 K-均值是因为它可以发现k个不同的簇,且每个簇的中心采用簇中所含值的均值计算 其他聚类算法:二分K-均 ...
- 解决vscode格式化vue文件出现的问题
遇到的问题 使用vscode开发vue项目的时候,格式化vue文件,与自己配置的eslint标准会有冲突. 引号问题:单引号变双引号 分号问题:行末是否加分号.自动加/减分号 当然还会有其他个性化冲突 ...