> 安裝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')}}
```
