【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

@SpaceChart/Translate

@SpaceChart/Translate 是一个可配置的翻译插件，适用于任何环境，让开发者不再需要注重插件本身；插件支持自定义翻译引擎，快速生成对应的AI翻译模型客户端插件

Repository

• GitHub
• NPM

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ×

Installing

Package manager

Using npm:

$ npm install @spacechart/translate

Using bower:

$ bower install @spacechart/translate

Using yarn:

$ yarn add @spacechart/translate

Using pnpm:

$ pnpm add @spacechart/translate

CDN

Using jsDelivr CDN (ES5 UMD browser module):

<script src="https://cdn.jsdelivr.net/npm/@spacechart/translate@1.0.1/dist/translate.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/@spacechart/translate@1.0.1/dist/translate.min.js"></script>

Create Your first translate project

Initialize Node.js project

node init -y

Install dependencies

npm install @spacechart/translate

Introducing dependencies

const { DeeplxTranslateEngine, TranslateEngineInstance } = require("@spacechart/translate");const engine = new TranslateEngineInstance(new DeeplxTranslateEngine({//...})
);engine.translate({text: "你好世界"}).then((res) => {console.log("---翻译结果", res.data);});

Translate engines

开发者可以通过实现 ITranslateEngine 接口创建自定义翻译引擎，也可以使用内置的翻译引擎，比如Deeplx（DeeplxTranslateEngine）

Deeplx

实现类：DeeplxTranslateEngine

const { DeeplxTranslateEngine, DeeplxLanguage } = require("@spacechart/translate");const enine = new DeeplxTranslateEngine({//....
});//发送请求
engine.translate({//....}).then((res) => {consoe.log("-----翻译结果", res);});

Custom Engine

接口类：ITranslateEngine

export class MyTranslateEngine implements ITranslateEngine {//单个翻译请求singleTranslate(options: TranslateConfigOption): Promise<TranslateResponseOption> {//....}//批量翻译请求branchTranslate(options: TranslateConfigOption[]): Promise<TranslateResponseOption[]> {//....}//单个或多个请求translate(options: TranslateConfigOption | TranslateConfigOption[]): Promise<TranslateResponseOption> | Promise<TranslateResponseOption[]> {//....}
}const enine = new MyTranslateEngine();enine.translate({//...
});

TranslateEngineInstance Class

除了使用对应的翻译引擎类外，插件还提供了TranslateEngineInstance类，它同样继承了ITranslateEngine接口，TranslateEngineInstance 通过多态的特点，让开发者可以随意的更换引擎，而不用更改已编写的代码（如下）

const { DeeplxTranslateEngine, TranslateEngineInstance } = require("@spacechart/translate");const enine = new TranslateEngineInstance(new DeeplxTranslateEngine({//..})//更换引擎，下面的translate无需更换// new MyTranslateEngine({//    //..// })
);enine.translate({//....}).then((res) => {consoe.log("-----翻译结果", res);});

Extention Plugins

Vue Plugin

Vue 插件通过TranslateVuePlugin类创建使用，支持v-not-translate指令排除需要翻译的文本（如下）

Options

属性类 VuePluginDefaultConfigOption

字段	是否必填	类型	描述
engine	是	ITranslateEngine	翻译引擎
el	否	string	需要翻译的顶级节点
global	否	boolean	是否全局注入$t全局插件变量 ，默认false

Methods

方法名	描述
install(app: any, options: VuePluginDefaultConfigOption)	Vue.directive注册指令时使用
create(options: VuePluginDefaultConfigOption)	创建 VuePlugin 插件使用

Example

1. main.js

import Vue from "vue";
import App from "./App.vue";import { DeeplxTranslateEngine, TranslateVuePlugin } from "@spacechart/translate";Vue.config.productionTip = false;
Vue.use(TranslateVuePlugin, {//翻译引擎engine: new DeeplxTranslateEngine({url: "/translate",authorization: "xx xx"}),//需要翻译的节点el: "#app"
});new Vue({render: (h) => h(App)
}).$mount("#app");

2. App.vue

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js App" /><div class="div">你好 yes<div class="div" v-not-translate>How are you?</div></div></div>
</template><script>import HelloWorld from "./components/HelloWorld.vue";export default {name: "App",components: {HelloWorld},data() {return {};},mounted() {setTimeout(() => {this.$t.translate({src: "EN",target: "ZH",languageMap: [{src: "EN",target: "ZH",srcText: "你好",targetText: "Hello"}]});});}};
</script>

HTML Plugin

HTML 插件通过TranslateHTMLPlugin类创建使用，支持not-translate属性排除需要翻译的文本（如下）

Options

属性类：HtmlPluginDefaultConfigOption

字段	是否必填	类型	描述
engine	是	ITranslateEngine	翻译引擎
el	否	string	需要翻译的顶级节点

Methods

方法名	描述
create(options: HtmlPluginDefaultConfigOption)	创建 HtmlPlugin 插件使用

Example

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../../dist//translate.js"></script></head><body><div id="app">你好</div><script>const { TranslateHTMLPlugin, DeeplxTranslateEngine } = translate;const plugin = TranslateHTMLPlugin.create({engine: new DeeplxTranslateEngine({url: "/translate",authorization: "xx xx"}),el: "#app"});plugin.translate({src: "ZH",target: "EN"});</script></body>
</html>