vue实现国际化 Vue（三十三）国际化解决方案

顺晟科技

2022-09-23 11:01:13

251

摘自：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

上一篇：springboot整合activi 下一篇：vue前后端?Vue：前端体系、前后

网站建设

Js

vue实现国际化 Vue（三十三）国际化解决方案