插件链接地址：
translate: 两行js实现html全自动翻译，页面无需改动，无语言配置文件，无API Key，对SEO友好！
支持语种：
/language.json
存在问题：
页面中类似弹窗那种，初始化时未显示的那部分，无法直接翻译，只能翻译可视区域内，无法翻译部分还需借助vue-i18n处理。
在html页面中使用：
<body> <div>普京将对中国进行国事访问热</div> <div>歌手导演洪啸：报名确认好档期呀热</div> <div>扫码可领个人劳动补贴？不实</div> <div>普京将对中国进行国事访问热</div> <div>歌手导演洪啸：报名确认好档期呀热</div> <div>扫码可领个人劳动补贴？不实</div> <div>普京将对中国进行国事访问热</div> <div>歌手导演洪啸：报名确认好档期呀热</div> <div>扫码可领个人劳动补贴？不实</div> <div>普京将对中国进行国事访问热</div> <div>歌手导演洪啸：报名确认好档期呀热</div> <div>扫码可领个人劳动补贴？不实</div> <div>普京将对中国进行国事访问热</div> <div>歌手导演洪啸：报名确认好档期呀热</div> <div>扫码可领个人劳动补贴？不实</div> <div id="translate"> <span>2</span> </div> </body> <script src="https://cdn.staticfile.net/translate.js/3.1.7/translate.js"></script> <script> translate.language.setDefaultTo('russian'); //chinese_traditional-繁体 chinese_simplified-简体 english-英语 translate.execute(); </script>
vue中使用：
项目入口文件：index.html 引入：<script src="https://cdn.staticfile.net/translate.js/3.1.7/translate.js"></script> <script> translate.ignore.class.push('global_lang_btn'); //忽略不翻译的元素节点 let lang = localStorage.getItem("current_lang"); //页面刷新后能获取到之前设置的语种 if(lang){ translate.language.setDefaultTo(lang); translate.execute(); } <script> <el-dropdown placement="bottom"> <span class="el-dropdown-link"> <img src="@/assets/image/Language.svg" /> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <span class="ignore" @click="setLang('zh')">中文简体</span> </el-dropdown-item> <el-dropdown-item> <span class="ignore" @click="setLang('hk')">中文繁體</span> </el-dropdown-item> <el-dropdown-item> <span class="ignore" @click="setLang('en')">English</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> js: setLang(lang){ localStorage.setItem("current_lang",lang); translate.changeLanguage(lang); //不跳页面直接切换语言 //this.$nextTick(()=>{ //设置菜单下的选中状态的距离左侧的距离 //this.$refs.bgBarRef.style.width=this.$refs.navRefs[0].offsetWidth+"px"; //}) this.$i18n.locale = lang; }
