赖人国际化,自动百度翻译,优先本地语言
本次说明用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"}
.......