VUE项目国际化以及问题解决记录

VUE项目国际化以及问题解决记录

整体的国际化使用i18n插件，自定义语言包，下面是除了基础配置外遇到的问题以及解决方案

问题一：不同语言的样式

由于不同语言的表现形式不同，内容长度也不一致，比如英文一句话要比中文一句话长得多。因此在前端进行展示时，就必须要考虑到最终的显示问题，否则一旦切换语言环境那么一定会导致页面的布局展示出现问题，处理方式无非几种：

• 允许文字内容换行展示，在文字发生换行时，要通过 CSS 设置按完整词换行。word-break: keep-all;
• 不允许换行的，就要控制固定宽度，超出部分打点展示，鼠标移入展示全部内容等

    .fixed-width {
        display: inline-block; /* 也可以使用 block */
        width: 200px; /* 根据需求调整宽度 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

• 测试一下，具体情况具体分析，将布局设置成各种语言都能放得下

问题二：后端接口语言环境变更

常见的，请求错误的提示信息私有后端根据具体情况返回的，前端不能提前知道，因此没办法配语言包。常见的做法有：

• 在请求头中存储一个表示当前页面语言环境的字段，后端根据这个字段返回给前端具体的内容。这种做法，如果前端页面切换语言环境，需要页面刷新，重新获取后端数据
• 后端在返回时同时返回多种语言的message，前端根据语言环境决定如何渲染

问题三：时区问题

和国际化关系不大，但在实际使用中出现了问题。
场景：设置 考试开始时间，在国外设置时时区的问题。
关键点：时间字符串转换成时间戳是在何处进行的。
在前端进行，前端发送请求之前已经转换为时间戳格式，时区和浏览器使用的系统设置有关；
在后端或数据库中转换时，和后端服务器所处位置以及设置有关。

解决办法：在前端进行时间戳的转换。数据库也存储时间戳，保证数据的绝对正确。对于用户来说，设置的时间就是自己所在时区的准确时间。同一个时间戳数据在不同时区查看时间字符串相应变化。