业务逻辑
运用Vue-il18n 主要来切换页面上固定字符
ant desing 自带切换中英文的组建套在项目最外层即可(传递属性控制)
后台配合 主要是接口返回的字符串什么的 也得为英文(在请求头中添加页面当前语言状态)
引入Vue-il18n
yarn add vue-i18n
main.js
//引入
import VueI18n from 'vue-i18n'
//注册
Vue.use(VueI18n)
//判断本地是否存储有中英文 状态
if(localStorage.getItem("pro__language") != null){
}else{
//没有就添加 默认为中文 加本地储存的意义是 为了下一次用户进入该页面能够记住是中文还是英文 方便用户使用
localStorage.setItem('pro__language',JSON.stringify({lang:'zh'}))
}
const i18n = new VueI18n({
//读取本地储存的 状态
locale: JSON.parse(localStorage.getItem('pro__language')).lang,
messages: {
//将本地中英文翻译为两个文件(一个中文 一个英文)用于切换 多语言也可
'en': require('./lang/en'),
'zh': require('./lang/zh'),
}
})
//挂载
new Vue({
i18n,
}).$mount('#app')
翻译字符串文件格式(就是简单的导出一个对象)
中文 zh.js
export const l = {
language:'English',
all:'全部',
}
英文 en.js
export const l = {
language:'中文',
all:'all',
}
模板替换 和一般的变量差不多(大概三种用法)
模板字符串
<span style="cursor: pointer;" @click="changelang">
{{ $t('l.language') }}
</span>
属性变量
<a-input :placeholder="$t('l.PleaseEnter')+' '+$t('l.ChineseDescription')"></a-input>
js变量
title: this.$t('l.edition'),
实现切换的功能
changelang(){
// 强制刷新页面
window.location.reload(true)
// 切换模板
if(this.$i18n.locale == 'zh'){
//如果点击切换时为中文就将本地储存的标识改为英文 i18n.locale的值也改为英文 反之亦然
window.localStorage.setItem('pro__language',JSON.stringify({lang:'en'}))
this.$i18n.locale = 'en'
}else{
window.localStorage.setItem('pro__language',JSON.stringify({lang:'zh'}))
this.$i18n.locale = 'zh'
}
},
到这就能实现基本的字符串切换
但是如果你有用到组建库什么的组件库的 字符该怎么替换 这是就要用到组件库为我们准备的切换组件了
anr 有提供 其他组件库我还不清楚(菜鸡一枚)
我们在 App.vue中用 <a-locale-provider></a-locale-provider> 标签将 <router-view/>包裹起来
<template>
<a-locale-provider :locale="locale">
<div id="app">
<router-view/>
</div>
</a-locale-provider>
</template>
locale属性泽由
computed计算出来
computed:{
// ant desing VUE ui库的中英文切换
locale(){
if(this.$i18n.locale == 'zh'){
return zhCN
}else if(this.$i18n.locale = 'en'){
return enUS
}
}
},
还有就是接口返回字符串问题
这个就要和后台小伙伴商量了