国际化是什么？
国际化对应的英文单词为 Internationalization，又称“i18n”：
- i 为单词的【第一个】字母
- 18 为【i 和 n 之间】字母的个数
- n 为单词的【最后一个】字母
如果你的项目是vue，那么相信你在实现国际化功能时，也必不可少的会使用到“vue-i18n”这个库，接下来本文也是通过这个库搭配vue实现最基本的国际化功能。
一、集成vue-i18n
1、安装依赖
npm i vue-i18n -S
2、配置vue-i18n
- 在src目录下创建i18n目录用于保存和语言切换相关的内容
- 在i18n目录下创建lang目录用于保存不同语言的映射关系，如中文对应zh.js、英文对应en.js等
- 在i18n目录下创建index.js作为默认导出，并在其中创建i18n对象
// index.js
import { createI18n } from 'vue-i18n'
import A_zh from './lang/A/zh'
import A_en from './lang/A/en'
const i18n = createI18n({
legacy: false,
locale: 'zh', // 初始化配置语言
messages:{
zh: {
aFile: A_zh
},
en: {
aFile: A_en
}
},
silentTranslationWarn: true // 隐藏警告
})
export default i18n
3、主文件main.js注册i18n
import { createApp } from 'vue'
import i18n from './i18n'
import store from './store'
import App from './App.vue'
createApp(App)
.use(store)
.use(i18n)
.mount('#app')
实际上在通过use(i18n)时，会调用i18n.install()方法，大概内容如下：
- 通过app.provide(app.__VUE_I18N_SYMBOL__, i18n)将i18n对象提供给应用中的所有后代组件可通过inject注入
- 通过app.config.globalProperties.xxx = xxx的方式为应用添加全局属性/方法，实际上是对Vue2中Vue.prototype使用方式的一种替代
- 常见全局属性，如$i18n通过app.config.globalProperties.$i18n=i18n添加到全局
- 常见全局方法，如$t，$rt，$d，$n，$tm通过Object.defineProperty(app.config.globalProperties, `$${method}`, desc)添加到全局
- 通过apply(...)方法注册常用的全局指令和全局组件i18n等
- 在根组件卸载时移除/释放i18n相关内容
const unmountApp = app.unmount
app.unmount = () => {
i18n.dispose()
unmountApp()
}
- 注册vue-devtools的相关插件
二、根据数据信息填充国际化内容
1、填充lang目录下文件映射关系
在lang/A/zh.js文件中：
export default {
name:'年龄'
}
在lang/A/en.js文件中：
export default {
name: 'name'
}
2、页面渲染
翻译处理可通过如下方式处理：
- 使用$t(...)方法
- 使用v-t指令
- 使用<i18n-t></i18n-t>组件
这里选择第一种，因为它更灵活，能使用到的范围也更广，指令和组件形式限定在了template中：
<template>
<div>{{$t('aFile.name')}}</div>
</template>
基于以上简单的例子，已经能够实现了国际化切换功能。
三、思考
1、转换翻译文件类型(.js转.json)
上述的翻译文件是.js文件，因此，为了能够让其能够被其他文件导入，我们不得不在文件中使用export default或export将对应文件内容向外导出，但其实我们可以将.js文件转换为.json文件直接使用，避免新增一个国际化语言文件就需要手动导入一次翻译文件的问题。
在src/index.js文件中：
// index.js
import { createI18n } from 'vue-i18n'
// 动态读取.json文件中定义的国际化语言字段
const getMessage = () => {
const messages = {}
const modules = import.meta.globaEager('./lang/*')
for(let key in modules){
let langKey = key.replace(/\.\/lang\/(.+).json$/, (match, p1) => p1)
messages[langKey] = modules[key].default
}
return messages
}
const i18n = createI18n({
legacy: false,
locale: 'zh', // 初始化配置语言
messages: getMessage()
})
export default i18n
2、考虑不同语言的样式
由于不同语言的表现形式不同，内容长度也不一致，因此在前端进行展示时，就必须要考虑到最终的显示问题，否则一旦切换语言环境那么一定会导致页面的布局展示出现问题，处理方式无非几种：
- 允许文字内容换行展示，在文字发生换行时，要通过css设置按完整词换行；不允许换行的，就要控制固定宽度，超出部分打点展示，鼠标移入展示全部内容等
- 单独为不同语言环境设置样式，具体还是得看展示需求，如需要考虑不同语言环境下文字的对齐方式、文字间距等
- 针对难以处理的翻译内容，可以通过和业务沟通是否可以替换翻译内容、缩减文字长度等等
3、考虑后端接口语言环境变更
一个项目的国际化不可能都是前端来实现的，一些接口动态返回的内容也是需要后端去处理的，通常接口的请求头中会存储一个用于标识当前页面语言环境的字段，然后再决定返回给前端页面的具体内容。
基于前面处理的国际化切换功能，本身是会基于vue的响应式来切换翻译内容的，即不会刷新页面，因此在切换对应翻译内容后，同样需要修改后续接口请求头中的语言环境。
但这样还是有问题的，已经通过接口返回的数据内容，此时没有办法切换成对应的翻译内容，因此当前的国际化切换是基于页面的变动，但基于接口变动的部分还没重新请求获取新的内容，那怎么处理呢？
- 前端切换语言环境后，重新刷新页面，再次调用接口获取新的内容
- 后端在返回数据时，将对应的不同语言环境的翻译内容一起返回，由前端根据语言环境决定如何渲染
- 将所有的翻译内容全部交由前端管理，一开始就初始化好各个语言环境对应的翻译内容
以上内容是基于国际化功能的一点思考，记录的只是自己在项目中遇到的点，并不一定适用所有项目。
标签：国际化,语言,js,vue,i18n,import From： https://www.cnblogs.com/coolsboy/p/17095326.html