vue-i18n 中英文翻译

1.接口获取的动态数据：

接口的请求头中添加英文的参数或传参增加英文参数，得到英文数据，渲染到页面。

2.非接口的死数据：

vue-i8n插件，可在路由中添加中英文的标识，来判断加载什么语言；或在本地存储中设置标识来控制中英文。

3. vue-i8n

安装:

 npm install vue-i18n

新建i18n文件夹，用来存储对应的中英文字段：

image.png

index.js中初始化i18n，并暴露出去，main.js中挂载到vue实例上：
index.js：

image.png

main.js：

image.png

image.png

zh.js和en.js内容，key一定要对应，为了方便管理，页面是按模块进行定义的：

image.png

页面中使用：

// 例如"首页" => "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;
}