> 安装vue-i18n
`npm install vue-i18n@next`
~~~javascript
cnpm install vue-i18n //只适用于 vue2 的版本
cnpm install vue-i18n@next // vue3 安装这版
~~~
> 创建src/locales文件夹存放各版本语言变量
> 创建locales/i18n.ts
```
import { createI18n } from 'vue-i18n' // 引入vue-i18n组件
import cn from './zh-cn/zh-cn'
import en from './en-us/en-us'
const i18n = createI18n({
locale: 'cn', // 设置语言环境
fallbackLocale: 'en', // 没有中文的话默认英文
globalInjection: true, // 如果不设置为true挂载到全局的话，{{$t(`message.name`)}}这种使用会报错
legacy: false,
messages: {
// 配置语言
en: en,
cn: cn,
},
})
export default i18n
```
> 创建locales/zn-ch/zn-ch.ts配置中文，en-us同下
```
import login from './login'
export default {
message: {
...login,//分模块
},
}
```
> 创建locales/zn-ch/login.ts
```
export default {
login: {
btn: '登录',
},
}
```
> main.ts引入
```
import i18n from './locales/i18n'
// 国际化
app.use(i18n)
```
> 页面使用
```
{{$t('message.login.btn')}}
```
