现在做的 vue3 项目中需要配置国际化，所以选择了 vue-i18n ，所以打算用一篇文章来介绍下 i18n 的用法及使用过程中踩的一些坑。

首先，介绍下 vue-i18n 的基本使用方法，在项目中，我们一般会新建一个文件夹专门存放 i18n 的配置，然后新建 index.ts 文件，引入 vue-i18n ， vue-i18n 使用 createI18n 创建实例，下面代码我们新建了一个 i18n 实例；

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中引入，更改上面的代码；
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;
import { createApp } from 'vue'
import i18n from './i18n'
const app = createApp(App)
app.use(i18n).mount('#app')
接下来就可以在页面中使用他们了
在模板中使用
首先是在template模板中使用，这个比较简单，直接使用全局方法$t即可，我们以首页这个字段为例：
<template>
  <div>{{ $t('menus.wIndex') }}</div>
</template>
看页面上，显示正常
const i18n = createI18n({
  locale: 'en', // 设置语言类型
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: message,
刷新页面，切换成功
这样在模板中使用就没有任何问题了
ts文件中使用
接下来我们了解下载ts文件中如何使用，在ts文件中，我们通过i18n.global.t方法来使用，如下我们给左侧的菜单列表配置国际化；
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
在script中使用
在script中，我们需要引入vue-i18n的useI18n方法
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { RouteLocationMatched, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
const route = useRoute()
const breadcrumb = ref<RouteLocationMatched[]>([])
const { t } = useI18n() // 解构出t方法
const getBreadcrumb = () => {
  let matched = route.matched.filter(
    (item: RouteLocationMatched) =>
      item.meta && item.meta.title && item.children.length !== 1
  const first = matched[0]
  if (first.path !== '/index') {
    matched = [
      { path: '/index', meta: { title: t('menus.wIndex') } } as any, // 使用t方法
    ].concat(matched)
  breadcrumb.value = matched
</script>
以上是vue-i18n的基本使用方法，说实话比较简单，所以我也没有过多的陈述，这篇文章主要是向记录下本人在使用中踩得一些坑。
一、在配置语言切换按钮时报错：Must be called at the top of a 'setup' function，报这个错的原因是因为我在做语言切换功能的时候，直接使用引入的useI8n方法，如下：
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const changeLang = (lang: string) => {
  useI18n().locale.value = lang //直接使用useI18n()导致报错
  localStorage.setItem('LANG', lang)
const getCurrentLang = computed(() => {
  return useI18n().locale.value
</script>
解决这个报错的方法也很简单，顾名思义，我们只需在setup方法先调用这个方法即可；
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n() // 先调用此方法，然后再使用
const changeLang = (lang: string) => {
  locale.value = lang
  localStorage.setItem('LANG', lang)
const getCurrentLang = computed(() => {
  return locale.value
</script>
二、在ts文件和script 中配置的t变量只有刷新才能切换中英文，无法响应式发生变化，所以需要将配置都改到模板中去使用。
以上就是vue-i18n的使用方法及踩坑记录简记，如果大家还有其他的踩坑记录，欢迎大家在评论区留言，谢谢大家。
 
  
 
 

    还是那个大斌啊
        21.7k
      
 
粉丝