项目国际化
最近团队开发的项目,客户需求要做国际化,之前没有考虑过这方面的需求,所以没有将静态文字单独作为配置文件来做,基本上全部的文字都是直接写在html标签中,现在要改,感觉好恼火,但客户是上帝哈,没办法,只能给人家搞了,废话不多说,看代码吧
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue-i18n 依赖包 -->
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<!-- 英语 常量 en 对象-->
<script src="english.js"></script>
<!-- 汉语 常量 cn 对象-->
<!-- 这是cn对象,en 对象跟其一样,只是属性值为英文
const cn = {
message: {
hello: '你好',
name: '小刺猬',
info: '好可爱的人',
lange: 'English' // 把lange 在这里写成英文 只是为了切换方便
}
} -->
<script src="chinese.js"></script>
<script>
const messages = {}
messages.en = en ;
messages.cn = cn ;
var i18n = new VueI18n({
locale: 'cn',
messages,
})
window.onload = function () {
new Vue({
i18n,
el: '#app',
data: function () {
return {
}
},
methods: {
}
})
}
function changeLanguage() {
i18n.locale = i18n.locale == 'en' ? 'cn' : 'en'
}
</script>
<body>
<div>
<button onclick='changeLanguage()'>{{$t('message.lange')}}</button>
</div>
</body>
具体的实现思路就是这样的,根据项目的情况去定义。