这是我参与8月更文挑战的第20天,活动详情查看:8月更文挑战
国际化
本项目通过vue-i18n实现国际化,由于使用了element,所以在项目国际化的时候,也需要把element国际化,在@/lang/index.js中。
会将当前的语言存在cookie中,下次打开的时候,知道语言设置。
在@/lang/index.js中引入了element的语言包。
$t是vue-i18n提供的全局方法,可以用来取值,就像之前学习过的登录界面
在@/views/i18n-demo/index.vue页面中,局部引入了国际化
在js中通过$t 取值,在select组件中,这样获取,但是这种情况下,国际化只会执行一次,因为this.options只会在初始化的时候执行一次,数据不好根据lang的改变而改变,所以需要在lang变化的时候重设this.options
watch: {
lang() {
this.setOptions()
}
}
国际化的代码在i18n分支,因为以后可能用到,所以我选择了这个分支,默认的master分支是没有国际化的。
删除掉相关文件以及引用就可以移除项目中的国际化,不需要的时候可以删掉(建议项目立项时就考虑好要不要做国际化)
错误处理
页面级别的错误是由vue-router统一处理,没有匹配到的页面都会转到404页面
需要注意的事,之前提到过,就是404页面需要最后挂载,不然所有页面都会到404页面。
没有权限进入的页面会路由到401页面。
项目中的请求都用了封装的request.js,它做了统一的错误处理。可以在@/utils/request.js中的 response拦截器中,根据状态码,或者自定义的code做一下错误处理。例如弹框提示等。
由于所有请求返回的都是promise,所以每个请求都可以catch单独处理。