在 vue 中使用 translate.js

方式一：

package.json 文件

增加

  1. "i18n-jsautotranslate": "^3.12.7",

页面上出现语言切换的Select下拉切换菜单

  1. <template>
  2.     <div id="translate"><!-- 这里是显示语种切换的select，不需要时直接删掉这个div即可。 --></div>
  3. </template>

JS部分：

  1. import translate from 'i18n-jsautotranslate'
  2. window.translate = translate; //方便审核元素用控制台调试
  3. translate.service.use('client.edge'); //翻译通道
  4. translate.whole.enableAll(); //整体翻译
  5. //页面渲染完毕后触发执行 translate.execute(); 
  6. nextTick(() => {
  7.     translate.execute();
  8.     setTimeout(function(){
  9.         //vue的input中的placeholder属性会在nextTick之后延迟渲染，而这个属性是没有别的方式来监听的，所以额外加一个定时器
  10.         translate.execute();
  11.     }, 500);
  12.     translate.listener.start();    //开启html页面变化的监控
  13. });
  14. onUpdated(() => {
  15.     translate.execute();
  16. });

这里有个示例可以参考： https://lruihao.github.io/vue-el-demo/#/translate-js

方式二：

  1. <script src="https://cdn.staticfile.net/translate.js/3.5.2/translate.js"></script>
  2. <script>
  3. translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种） 具体参考 http://translate.zvo.cn/41551.html
  4. translate.service.use('client.edge');
  5. translate.listener.start();    //开启html页面变化的监控，对变化部分会进行自动翻译。 具体参考 http://translate.zvo.cn/41552.html
  6. translate.execute(); //执行翻译初始化操作，显示出select语言选择
  7. </script>

完整的index.html 示例:

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Vite + Vue</title>
  8.   </head>
  9.   <body>
  12.     <div id="app"></div>
  13.     <script type="module" src="/src/main.js"></script>
  16.     <script src="https://cdn.staticfile.net/translate.js/3.4.2/translate.js"></script>
  17.     <script>    
  18.     translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认就是 'chinese_simplified' 简体中文。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明
  19.     translate.service.use('client.edge');
  20.     translate.listener.start();    //开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
  21.     translate.execute(); //执行翻译初始化操作，显示出select语言选择
  22.     </script>
  24.   </body>
  25. </html>

注意

fan方式二在vue里面进行调用，比如你vue页面中有个切换语言的按钮，点击后进行切换为某种语言，千万不要在vue页面中引入 translate.js ，这样会造成重复引入重复翻译， vue中使用时只需要前面加个windows就好了，比如 主动进行语言切换 不是vue的情况正常使用是 translate.changeLanguage('english'); 而在vue代码中触发则是 window.translate.changeLanguage('english');

文档编写

方式二的文档编写者：青岛云迪智能科技有限公司 - 赵安吉
如果您在使用时有什么问题，需要付费求助，可以联系 赵安吉微信 HoneyZ1103 具体需要他帮什么、以及费用你们可以自行商谈