--- theme: cyanosis --- # 前言现在做的`vue3`项目中需要配置国际化，所以选择了`vue-i18n`，所以打算用一篇文章来介绍下`i18n`的用法及使用过程中踩的一些坑。 # 基本使用首先，介绍下`vue-i18n`的基本使用方法，在项目中，我们一般会新建一个文件夹专门存放`i18n`的配置，然后新建`index.ts`文件，引入`vue-i18n`，`vue-i18n`使用`createI18n`创建实例，下面代码我们新建了一个`i18n`实例； ```js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'cn', // 设置当前语言类型 legacy: false, // 如果要支持compositionAPI，此项必须设置为false; globalInjection: true, // 全局注册$t方法 messages: { cn: { message: { hello: '你好', }, }, en: { message: { hello: 'hello', }, }, }, }) export default i18n ``` 但是在实际项目中，我们会把语言的配置信息放在另外的文件中，像我现在做的这个项目，设置了英文和中文两种语言类型，所以我们新建了存放中文配置的文件`zh.ts`和存放英文的文件`en.ts`；然后在`index.ts`中引入，更改上面的代码； ```js import { createI18n } from 'vue-i18n' import EN from './en/en' import CN from './ZH-CN/cn' const message = { cn: { ...CN, }, en: { ...EN, }, } const i18n = createI18n({ locale: 'cn', // 设置语言类型 legacy: false, // 如果要支持compositionAPI，此项必须设置为false; globalInjection: true, // 全局注册$t方法 messages: message, }) export default i18n ``` 这样，一个新鲜出炉的`i18n`实例就创建好了，但是如果要在项目中使用，还得在入口文件中注册一下才行，进入`main.ts`文件，引入并注册`i18n`; ```js import { createApp } from 'vue' import i18n from './i18n' const app = createApp(App) app.use(i18n).mount('#app') ``` 接下来就可以在页面中使用他们了 ### 在模板中使用首先是在`template`模板中使用，这个比较简单，直接使用全局方法`$t`即可，我们以首页这个字段为例： ```js ``` 看页面上，显示正常 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e9fff9e4b2848d3bf5ba470f42559b0~tplv-k3u1fbpfcp-watermark.image?) 切换英文 ```js const i18n = createI18n({ locale: 'en', // 设置语言类型 legacy: false, // 如果要支持compositionAPI，此项必须设置为false; globalInjection: true, // 全局注册$t方法 messages: message, }) ``` 刷新页面，切换成功 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b2e70a855db46a3aaed4f33b09e21ff~tplv-k3u1fbpfcp-watermark.image?) 这样在模板中使用就没有任何问题了 ### ts文件中使用接下来我们了解下载ts文件中如何使用，在`ts`文件中，我们通过`i18n.global.t方`法来使用，如下我们给左侧的菜单列表配置国际化； ```js import Layout from '@/layout/index.vue' import i18n from '@/i18n' // 引入i8n实例 import { RouteRecordRaw } from 'vue-router' const homeRouter: RouteRecordRaw = { path: '/', redirect: '/index', name: 'Index', component: Layout, meta: { title: i18n.global.t('menus.wIndex'), icon: 'house', permission: 'system:index', }, children: [ { path: 'index', name: 'Index', component: () => import('@/views/index/Index.vue'), meta: { title: i18n.global.t('menus.wIndex'), //使用i18n.global.t() icon: 'house', permission: 'system:index', index: 0, }, }, ], } export default homeRouter ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62e083b1d07a41aea16413abe9e84006~tplv-k3u1fbpfcp-watermark.image?) ### 在script中使用在`script`中，我们需要引入`vue-i18n`的`useI18n`方法 ```js ``` # 踩坑经验以上是`vue-i18n`的基本使用方法，说实话比较简单，所以我也没有过多的陈述，这篇文章主要是向记录下本人在使用中踩得一些坑。一、在配置语言切换按钮时报错：`Must be called at the top of a 'setup' function`，报这个错的原因是因为我在做语言切换功能的时候，直接使用引入的`useI8n`方法，如下： ```js ``` 解决这个报错的方法也很简单，顾名思义，我们只需在`setup`方法先调用这个方法即可； ```js ``` 二、在`ts`文件和`script` 中配置的`t`变量只有刷新才能切换中英文，无法响应式发生变化，所以需要将配置都改到模板中去使用。 # 总结以上就是`vue-i18n`的使用方法及踩坑记录简记，如果大家还有其他的踩坑记录，欢迎大家在评论区留言，谢谢大家。