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的文件打开 ...
随机推荐
- Ueditor增加文字竖排显示和从右向左输入（支持蒙古文和维吾尔文）
平时我们在ueditor中都是输入的中文,排版都是从左向右输入.但是当输入一些少数民民族言时,ueditor却不能正常显示. 例如蒙古文字,传统蒙文是竖排书写.如下图:传统蒙古文排文方式,<蒙古 ...
- iOS 集成百度地图 位置偏移问题
iOS 集成百度SDK 请参考 百度地图官方文档 ,这里不就多啰嗦了 本文介绍的是在百度地图上根据经纬度,自定义气泡时,气泡位置的偏移,在我们天朝这种事是很常见的,也见怪不怪了,在项目中使用的百度地图 ...
- pythonのdjango 在控制台用log打印操作日志
在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_loggers': False, ' ...
- Ubuntu下使用Sublime Text 3配置Python开发环境
因为电脑配置有些低端,所以只能使用Sublime来当作Python的IDE. 1.下载Sublime Text 3并安装 首先去官网找到64位的.tar.bz2的压缩文件下载: 使用命令或归档管理器将 ...
- LeetCode 解题总结
1. 最长合法括号串 给定只包含'('和')'的字符串,找出最长合法括号串的长度. Example 1: Input: "(()" Output: 2 Explanatio ...
- 如何在submit上运行php文件
一..把php加入到环境变量 二.在sublmie中新建编译系统 三.添加一下代码,修改成php当前的目录地址,保存在默认的路径下,命名为php.sublime-build { "cmd&q ...
- 分组PARTITION BY及游标CURSOR的用法
基础数据表: select * from dbo.RecommendationChanelVersionRelation: 数据如下: 要求按照ChannelVersionID分组,对每组中的Orde ...
- 蓝盾杯writeup
由于比赛时只给了内网,web题目无法复现,这里就简单写一下misc的部分题目 1.眼花了吗 (默默吐槽居然是来自实验吧的原题) 提示:当眼花的时候会显示两张图,可以想到应该是包含双图的情况 用fore ...
- [其它]iOS 12.2支持电信VoLTE了，中国电信教你如何开通：只要三步
iOS 12.2支持电信VoLTE了,中国电信教你如何开通:只要三步 link :https://baijiahao.baidu.com/s?id=1629039609897267682&wf ...
- Go依赖模块版本之Module避坑使用详解
前提 对于Go的版本管理主要用过 glide,下面介绍 Go 1.11 之后官方支持的版本管理工具 mod. 关于 mod 官方给出了三个命令 go help mod.go help modules. ...