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的文件打开 ...
随机推荐
- 关于selenium的8种元素定位
selenium中有八种元素定位,分别是:id,name,class_name,tag_name,link_text.partial_link_text.xpath.css 简单的定位可以用 id.n ...
- 多个Fragment在一个activity中通过按钮的展示方法
fragment使用方法 1. 创建主Mainactivity extends AppCompatActivity 2. Oncreate & setContentView 3. 完成XML的 ...
- python捕获异常及方法总结
调试Python程序时,经常会报出一些异常,异常的原因一方面可能是写程序时由于疏忽或者考虑不全造成了错误,这时就需要根据异常Traceback到出错点,进行分析改正:另一方面,有些异常是不可避免的,但 ...
- 【转】一文掌握 Linux 性能分析之 I/O 篇
[转]一文掌握 Linux 性能分析之 I/O 篇 这是 Linux 性能分析系列的第三篇,前两篇分别讲了 CPU 和 内存,本篇来看 IO. IO 和 存储密切相关,存储可以概括为磁盘,内存,缓存, ...
- json中的json.dumps()
Json简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...
- Codeforces Round #352 (Div. 2) (A-D)
672A Summer Camp 题意: 1-n数字连成一个字符串, 给定n , 输出字符串的第n个字符.n 很小, 可以直接暴力. Code: #include <bits/stdc++.h& ...
- Windows 10无法连接远程桌面解决办法(这可能是由于CredSSP加密Oracle修正)
问题描述: 使用windows10 连接远程桌面时出现如下错误: 出现身份验证错误. 要求的函数不受支持. 这可能是由于CredSSP加密Oracle修正. 若要了解详细信息,请访问https://g ...
- 使用 DG Tweening
在iphone上卡顿的话,使用application.frame更改刷新帧率
- HTML5画布小dome八卦图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...
- https请求之绕过证书安全校验工具类（原）
package com.isoftstone.core.util; import java.io.BufferedReader; import java.io.ByteArrayOutputStrea ...