赖人国际化，自动百度翻译，优先本地语言

git地址: https://github.com/aafengjunjie/jj_languag

本次说明用vue-cli 3 来做示范。

安装：

npm install jj_language --save

在main.js

import language from 'jj_language'

//list 和  directory 别同时设置

language.initData({
	from:'auto', 
	to:getQueryString('to') || 'jp',
	//list:{'例如我是中文咯':'data'},
	//directory:'/language/',
	automatic:true,
});

Vue.use(language);

form：你网站的源语言，auto是自动识别的意思。

to：你需要翻译成啥语言

list：同步加载本地语言包

directory： 异步加载语言包

automatic：开启是否需要百度自动翻译，如果不需要百度自动翻译false即可

使用方法：

直接在视图里面使用。  echo('需要被翻译的内容')

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    	<HelloWorld :msg="echo('自动百度翻译，优先本地语言库')"/>
    <br/>
      原文:{{test}}
    <br/>
      翻译后:{{echo(test)}}
      </br>
      如果翻译的是变量，那么渲染内容会跟着变量的变化而变化，而且不影响变量原本的内容。
  </div>
</template>

注意：如果翻译的是变量，那么渲染内容会跟着变量的变化而变化，而且不影响变量原本的内容。

 

language.initData 里面是初始化配置的意思。

异步加载语言包

directory：这里是说语言包文件架的在线地址。  假设我的当前语言是en ，设你的语言包目录是http://www.baidu.com/lang/。

那么这个时候就会去请求，http://www.baidu.com/lang/en.js异步加载语言库。         假设语言是jp 那么请求的地址是http://www.baidu.com/lang/jp.js。

同步加载语言包

list:{'你好':'hello'}， 把语言json对象填入即可。

 

 

语言包格式：

页面上设置了echo('你好')  ,那么对应的语言包json对象里面需设置key 是你好的值

en.js

{
    "你好":"hello",
    "首页":"home",
}

 

 

本项目仅仅提供学习参考。如果需要用到自己的公司项目生产环境，请把翻译API配置到自己的后台地址下。

在配置里面写，这个接口返回的内容，就是百度翻译API翻译的内容，让你们的后台去处理。

language.initData({
	from:'auto', 
	to:getQueryString('to') || 'jp',
	webApi:'https://你自己的项目翻译接口地址URL',
	//list:{'例如我是中文咯':'data'},
	//directory:'/language/',
	automatic:true,
});

 

使用技巧

有人会疑问，中文是对应语言包里面的key。 假设26国语言都有翻译的时候，如果中文错了一个字，岂不是26个人工翻译都得改一次了？

很简单，你只需要也有一份zh.js的语言包。

默认的时候，你也加载中文语言包，关闭自动百度翻译。  然后  echo('$home-content')

zh.js   {"$home-content":"我是首页里面的一些内容咯，我可以随意改呢"}

en.js   {"$home-content":"I am the content inside home page a few, I can change at will"}

.......