https://github.com/volankey/vue-i18n-trans-loader

一个配合i18n全自动生成语言库并翻译的loader
https://github.com/volankey/vue-i18n-trans-loader

Last synced: 4 months ago
JSON representation

一个配合i18n全自动生成语言库并翻译的loader

• Host: GitHub
• URL: https://github.com/volankey/vue-i18n-trans-loader
• Owner: Volankey
• Created: 2019-01-07T13:10:07.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:58:23.000Z (about 2 years ago)
• Last Synced: 2024-10-14T06:08:05.802Z (4 months ago)
• Language: JavaScript
• Size: 1.65 MB
• Stars: 13
• Watchers: 0
• Forks: 3
• Open Issues: 25
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# vue-i18n-trans-loader

一个配合vue-i18n自动翻译并生成语言包的库

# 使用说明

1.安装vue-i18n，并按照vue-i18n的操作指引配置好

```

    npm install -S vue-i18n

```

2.将src目录下的loaders拷贝到vue的src目录下

3.配置好vue.config.js

>若您使用百度翻译api(建议)

```

npm install -S -D md5-node axios

```

```

var path = require("path");

var axios = require("axios");

var md5 = require("md5-node");

function resolve(dir) {

  console.log(__dirname);

  return path.join(__dirname, dir);

}

module.exports = {

  ...

  chainWebpack: config => {

    ...

    config.module

      .rule()

      .test(/\.(js|vue)(\?.*)?$/)

      .pre()

      .include.add(resolve("src"))

      .end()

      .use()

      //引入loader

      .loader(resolve("src/loaders/global.js"))

      .options({

        langs: [{

            name: "en",

            path: resolve("src/assets/lang/en.json"),

        },

        {

            name: "zh",

            path: resolve("src/assets/lang/cn.json"),

        },

        {

          name: "yue",

          path: resolve("src/assets/lang/yue.json"),

        },

        {

          name: "jp",

          path: resolve("src/assets/lang/jp.json"),

        }

      ],

        translate: async (from,to,key) => {

          //百度翻译开发者提供的appid以及secretKey

          let appid = "xxx",

              secretKey = "xxx";

          let sign = md5(

            appid + key + "12345" + secretKey

          );

          console.log(from,to,key , "翻译中....");

          let res = await axios.get(

            `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${key}&from=${from}&to=${to}&appid=${appid}&salt=12345&sign=${sign}`

          );

          console.log(key + ">>>" + res.data.trans_result[0].dst);

          return res.data.trans_result[0].dst;

        }

      });

  }

};

```

4.运行

```

npm run serve

```

5.用法

根据vue-i18n，但是我们不必要繁琐的配置

例如，您若是要翻译 src/components/HelloWrold.vue文件中的

```

Language

```

您只需要这么写

```

{{$t('Language')}}

```

产生的效果如下 可以看到langs数组中配置的每项的path路径产生的文件（这里只展示example的cn.json,当然jp.json也会产生，只不过对应的翻译不同）

```

{

	"components": {

		"HelloWorld.vue": {

			"Language": "语言"

		}

	}

}

```


若是您想要翻译

```

 

```

您需要这么写（注意外层双引号，内层单引号）

```

 

```

# 配置项解读

langs为一个数组，每一项由{name,path}组成，name为本项语言的名称，path为对应的语言的语言包路径

#### langs的第一项是程序默认的源语言，开发时使用的语言。example中是英语故将en作为第一项传入，剩下的都是要翻译的语言

translate为翻译的接口，您可以选择网络翻译，如example中配置的一样，您也可以选择本地翻译，但是需要您自己来进对应语言库文件的修改了

他的参数

- from 是源语言，对应langs中的name

- to 是要翻译成的语言，对应langs中的name

- key 是要翻译的源语言的字符串

他的返回值

- return 是一个翻译后的字符串

```

{

        langs: [{

            name: "en",

            path: resolve("src/assets/lang/en.json"),

        },

        {

            name: "zh",

            path: resolve("src/assets/lang/cn.json"),

        },

        {

          name: "yue",

          path: resolve("src/assets/lang/yue.json"),

        },

        {

          name: "jp",

          path: resolve("src/assets/lang/jp.json"),

        }

      ],

        translate: async (from,to,key) => {

          ...

          return res.data.trans_result[0].dst;

        }

      }

```