在 vue 中使用 translate.js

Vue项目使用方法

首先不要安装什么 i18n-jsautotranslate 这会出问题的

我们只需要在 index.html 中引入 translate.js 并配置即可
语言切换可以使用 translate.changeLanguage(想切换的语言)
其他方法也可以使用 详细参考文档
再说一次 不要安装什么 i18n-jsautotranslate 否则就会出现 选择语言后刷新保存不住 不翻译啥的
  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>

注意

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

文档编写

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