## 快速使用 在你的网页中加入以下js ```` layui.extend({ translate: '{/}https://res.wang.market/translate/else/layui_exts/translate/translate' // {/}的意思即代表采用自有路径，即不跟随 base 路径 //translate: '{/}./layui_exts/translate/translate' // 本地测试可以用这个 }) //使用拓展模块 layui.use(['translate'], function(){ var translate = layui.translate; //当页面加载完后执行翻译操作 window.onload = function () { translate.execute(); }; }); ```` ## 实际使用场景示例 #### 普通网站中点击某个语言进行切换 如下图所示，网站中的某个位置要有几种语言切换  直接在其html代码末尾的位置加入以下代码： ````

• English
|
• 简体中文
|
• 繁體中文

```` ## Layui 中翻译组件源码的git仓库 https://gitee.com/mail_osc/translate_layui

在 uniapp 项目中的详细使用说明 ## 使用 使用参考： [在 vue 中使用 translate.js](http://translate.zvo.cn/42046.html) 可以完全按照vue的使用方式来进行使用。 uniapp 打包发布 APP 后也是可以完美使用的，但是如果发布微信小程序，微信小程序里是不能用这个翻译的，这个需要知晓。 另外uniapp如果要打包app，打包app后翻译大概率是不能用的，可以参考这个文档进行调整 [https://gitee.com/mail_osc/translate/tree/master/extend/uniapp/](https://gitee.com/mail_osc/translate/tree/master/extend/uniapp/) ，里面有APP的相关demo示例以供参考 ## 其他 另外还有其他一些网友整理的说明可以参考： https://blog.csdn.net/akkigg/article/details/130806401 但是这种很容易踩坑，不推荐，如果你本身对uniapp很熟悉，那可以参考这个，不然踩坑后对uniapp不那么精通的话可能不好爬出来，建议按照我们建议的使用方式也就是vue的方式来

## [修改] package.json 文件 dependencies 中增加 ```` "i18n-jsautotranslate": "^3.18.73", ```` ## [新增] translate.js (或ts) 文件 比如，在你项目的 utils 目录（或其他什么目录都行）下，新增 translate.js (或.ts 只是后缀自己改一下就行) 文件。 此文件源码： [Github](https://raw.githubusercontent.com/xnx3/translate/refs/heads/master/extend/vue/vue3/translate.ts) | [Gitee](https://gitee.com/mail_osc/translate/blob/master/extend/vue/vue3/translate.ts) 这个文件也是你当前项目对翻译进行各种自定义微调所在。 有什么要设置的，比如设置使用你私有部署的翻译服务器提供翻译服务、设置哪些文字不进行翻译、设置自定义术语 ……等等 ## [修改] main.js (或ts) 文件 首先导入 上一步新建的文件，也就是新增一行 import : ```` import {translateJsVueUseModel} from './utils/translate' // 多语言切换, 导入translate插件 ```` 然后在 ````const app = createApp(App)```` 跟 ````app.mount('#app')```` 的中间，新增 ````app.use(translateJsVueUseModel);```` 改好的 main.js 文件如下图所示： ```` import { createApp } from 'vue' import App from './App.vue' import router from './router' import {translateJsVueUseModel} from './utils/translate' // 多语言切换, 导入translate插件 const app = createApp(App); app.use(router); app.use(translateJsVueUseModel); //注释掉，即可停用多语言切换能力 app.mount('#app'); ```` ## 页面上出现语言切换的Select下拉切换菜单 这里，我们针对部分UI框架，进行了适配，你可以直接快速使用 * ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3) * naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI) 如果你使用的别的UI框架，可以 [联系我](4030.html) 沟通，目前正在增加其他主流UI框架的，没准你要的就恰好有了，或者直接针对你当前使用的进行新适配。 ## 注意 比如你vue页面中有个按钮，点击后触发切换为某种语言，正常使用是 `translate.changeLanguage('english');` 而在vue代码中如果提示 `translate 不存在` ，那么你触发时前面额外加个windows.即可 ： `window.translate.changeLanguage('english');`