Web界面简繁体转换
1、静态转换(逐字翻译)
2、界面翻译(逐字翻译)
3、国际化(语句替换)
1、静态转换
使用 Vue 插件 language-tw-loader
在打包时把本地的文字转换成繁体,动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。
打包后无法再切换为简体。除非专门打一个简体的包。
使用方式
安装插件
npm i language-tw-loader
修改 webpack 配置文件webpack.base.conf.js
module: {
rules: [
......
{
test: /.(js|vue)$/,
loader: 'language-tw-loader',
}
]
}
运行或者打包就可看到效果
接口返回数据如何处理?
在本地配置一个参数,启动时读取参数,把参数发送到服务端,服务端根据类型返回简体或者繁体数据。
2、界面翻译
自定义工具类translate.js,递归翻译 document.body
在方法中 monted,updated 方法中调用translate方法
接口返回数据不影响,刷新界面后会翻译为繁体
如果启用了繁体整个项目基本不会出现简体,就算你输入框输入的简体,也会被强制刷新为繁体。
使用
引入项目
import Translate from './plugins/translate.js'
Vue.use(Translate)
调用方法
mounted() {
console.log("home mounted");
this.$translatePage();
},
updated() {
console.log("home updated");
this.$translatePage();
},
3、国际化
国际化的方式更加灵活,可以支持多种语言,不止繁体,需要维护多套文本,需要什么语言,增加一个语言描述文件即可。
vue-i18n安装: npm install vue-i18n --save
新建文件如下
zh-hans.js
const hans = {
message: {
'title': '简体显示',
'address': '广州市',
'text': '{msg}这是测试语句',
'name': '{0}赵钱孙{1}{2}',
'product': 'apple
$99',
'car': '车 | 很多车',
'apple': 'no 铁甲依然在 | one 铁甲依然在 | {count} 铁甲依然在',
'hello': '铁甲依然在,宗主依然菜。'
}
}
export default hans
zh-hant.js 文件
const hant = {
message: {
'title': '繁体显示',
'address': '廣州市',
'text': '{msg}這是測試語句',
'name': '{0}趙錢孫{1}{2}',
'product': 'apple
$99',
'car': '車 | 很多車',
'apple': 'no 鐵甲依然在 | one 鐵甲依然在 | {count} 鐵甲依然在',
'hello': '鐵甲依然在,宗主依然菜。'
}
}
export default hant
index.js
import hans from './zh-hans'
import hant from './zh-hant'
export default {
'zh-Hans': hans, // 简体
'zh-Hant': hant // 繁体
}
i18n.js 文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: (localStorage.lang !== undefined) ? localStorage.lang : (navigator.language === 'zh-HK' || navigator.language === 'zh-TW' || navigator.language === 'zh-hant' || navigator.language === 'zh-Hant') ? 'zh-Hant' : 'zh-Hans',
fallbackLocale: 'zh-Hans',
messages
})
export default i18n
main.js 中引入
import i18n from './i18n/i18n'
new Vue({
i18n,
el: '#app',
router,
components: { App },
template: ''
})
使用,通过$t引用定义的文字
{{$t('message.title')}}
点我切换繁体
点我切换简体
插值访问
插入html语句
复数访问
组件
手动改变语言类型
changeType(index){
if(index == 0){
localStorage.setItem('lang','zh-Hant');
this.$i18n.locale = 'zh-Hant';
}else{
localStorage.setItem('lang','zh-Hans');
this.$i18n.locale = 'zh-Hans';
}
}
请求头中添加语言类型,服务端根据类型返回数据
'Accept-Language': (localStorage.lang !== undefined) ? localStorage.lang : (navigator.language === 'zh-HK' || navigator.language === 'zh-TW' || navigator.language === 'zh-hant' || navigator.language === 'zh-Hant') ? 'zh-Hant' : 'zh-Hans', // 初始未选择默认 cn 中文
总结
如果只是改变固定文字,国际化无疑是最好的选择,可灵活扩展更多语言,而且可以更加加入个性化差异,比如设置、設定(設置),相比‘設置’而言‘設定’更加符合用户习惯。
如果要app所有内容强制转换为繁体,只能使用方法2。
如果要打包成繁体项目,不考虑接口返回数据,可以考虑方法1。
读取浏览器配置navigator.language获取浏览器语言,将这个加到请求头里,这样后端可根据类型判断是否返回繁体文字。本地也可以根据类型自动加载不同类型的文字。
也可在app内部添加切换入口,用户自己设置语言,默认从浏览器读取。
编码参考 rfc4646
zh-Hant(Chinese written using the Traditional Chinese script)
zh-Hans(Chinese written using the Simplified Chinese script)
zh-HK
zh-TW
zh-CN