【解决方案】在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>