1.接口获取的动态数据:
接口的请求头中添加英文的参数或传参增加英文参数,得到英文数据,渲染到页面。
2.非接口的死数据:
vue-i8n插件,可在路由中添加中英文的标识,来判断加载什么语言;或在本地存储中设置标识来控制中英文。
3. vue-i8n
安装:
npm install vue-i18n
新建i18n文件夹,用来存储对应的中英文字段:
index.js中初始化i18n,并暴露出去,main.js中挂载到vue实例上:
index.js:
main.js:
zh.js和en.js内容,key一定要对应,为了方便管理,页面是按模块进行定义的:
页面中使用:
// 例如"首页" => "home"
this.$t("homefooter.footer1");
可获取当前页面的语言(即index.js中初始化时,定义的locale),一些需要判断的地方可根据此变量:
this.$i18n.locale
Tip:移动端项目一般不设置中英文切换按钮,可在路由中加中英文标识;web端有切换按钮可点击后改变this.$i18n.locale
来控制。
4. 一些非直接替换的字段翻译:
(1)年·月·日
function dateFormat(millinSeconds) { // 将毫秒数传入
var date = new Date(millinSeconds);
var monthArr = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec");
var suffix = new Array("st","nd","rd","th");
var year = date.getFullYear(); //年
var month = monthArr[date.getMonth()]; //月
var ddate = date.getDate(); //日
if(ddate % 10 < 1 || ddate % 10 > 3) {
ddate = ddate + suffix[3];
}else if(ddate % 10 == 1) {
ddate = ddate + suffix[0];
} else if(ddate % 10 == 2) {
ddate = ddate + suffix[1];
}else {
ddate = ddate + suffix[2];
}
return year + " " + month + " "+ ddate;
}