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的文件打开 ...
随机推荐
- python&JSONP（初级篇）
JSONP产生背景 1.跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 2.浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 3.如果协议,端口和主机对 ...
- Python自动化中的键盘事件
1) from selenium import webdriver 加载模块 2) b = webdriver.Friefox() 打开浏览器 3) b.get(‘http://xxxxxxx’) 打 ...
- 2018-2019-2 20165221 【网络对抗技术】-- Exp6 信息搜集与漏洞扫描
2018-2019-2 20165221 [网络对抗技术]-- Exp6 信息搜集与漏洞扫描 目录 1. 实践目标 2. 实践内容 3. 各种搜索技巧的应用 a. 搜索网址的目录结构 b.使用IP路由 ...
- k8s部署etcd数据库集群
⒈下载 https://github.com/etcd-io/etcd/releases ⒉解压 tar -zxvf etcd-v3.3.12-linux-amd64.tar.gz ⒊移动可执行文件及 ...
- DEV控件GridControl常用属性设置（转）
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView. ...
- ABP架构学习系列四：集成Dapper
之前,一直想集成Dapper到项目中,但是一直没成功,今天把abp升级到最新版,然后按教程来,就可以了,呵呵 现在,基于上一篇的源码进行升级和集成dapper,将abp升级到3.8.2 官方 ...
- CodeForces 587 E.Duff as a Queen 线段树动态维护区间线性基
https://codeforces.com/contest/587/problem/E 一个序列, 1区间异或操作 2查询区间子集异或种类数 题解 解题思路大同小异,都是利用异或的性质进行转化,st ...
- 爬虫 解析库re,Beautifulsoup,
re模块 点我回顾 Beautifulsoup模块 #安装 Beautiful Soup pip install beautifulsoup4 #安装解析器 Beautiful Soup支持Pytho ...
- mysql 从一个表查询数据插入另一个表或当前表
mysql insert into 表明(uid,lng,lat) SELECT uuid,lng,lat FROM 表明
- 基于物品的协同过滤item-CF 之电影推荐 python
推荐算法有基于协同的Collaboration Filtering:包括 user Based和item Based:基于内容 : Content Based 协同过滤包括基于物品的协同过滤和基于用户 ...