做语言转换操作的时候$I18n报错

我把已经初始化i18n并且在main.就是配置过了，

img


img


能通过$t调用我在i18n.js定义的数据，

img


但是在做语言转换的时候，我通过点击切换语言时说我$i18n未定义，我想知道为什么？相应代码和报错图如下：

img

img


<script setup lang="ts">
import { useI18n } from 'vue-i18n'
 
// 核心思想就是改变 useI18n 解构出来的locale
// 笔者 这里为了和页面中的其他变量 区别  - 取别名 i18nLanguage。  
const { locale: i18nLanguage } = useI18n()
 
const toggle = (languageKey) => {
  i18nLanguage.value = languageKey  // zh en
}
</script>
<template>
<el-button @click="toggle('zh')">点击切换中文</el-button>
<el-button @click="toggle('en')">点击切换英文</el-button>
</template>

有帮助采纳一下
这个错误意味着你调用了一个未定义的变量。
具体分析如下:
在 LayoutHeader.vue 文件的第58行,调用了 changeEn() 函数。

changeEn (LayoutHeader .vue:58 :1)

该函数内部试图读取$i18n变量:

cannot read properties of undefined (reading $i18n"

但是$i18n变量并没有被定义,导致了该错误。
可能的原因有几个:

  1. 没有导入$i18n。使用Vue I18n国际化时需要先导入:import {$i18n} from '@/lang'
  2. 导入了,但是$i18n装饰器没有添加到组件上。应为:
import {$i18n} from "@/lang";

@$i18n
export default{
 // ...
}
  1. 在changeEn()函数内部,使用this.$i18n来引用,而非$i18n。
  2. $i18n 定义在另一个文件中,但是没有正确 导入。
    所以首先需要检查:
  3. 是否正确导入了$i18n
  4. 是否添加了$i18n装饰器
  5. 在函数内部是否应该通过this来引用变量
  6. Import路径是否正确

基于new bing部分指引作答：
这个错误表明在切换语言时，无法读取到 $i18n 对象，因此报错 $i18n 未定义。这可能是由于以下几种情况引起的：

1、初始化 $i18n 的代码位置不正确：请确保你在 main.js 或其他入口文件中正确初始化 $i18n。确保初始化 $i18n 的代码在你的应用程序的起始位置被调用，这样其他组件才能够访问 $i18n 对象。

2、组件中未正确引入 $i18n 对象：如果你的组件是通过单文件组件 (SFC) 的形式编写的，你需要在组件中引入 $i18n 对象，以便在组件中使用。可以通过以下方式引入 $i18n：

import { $i18n } from '@/i18n.js'; // 根据实际路径修改

确保路径与实际的 i18n.js 文件路径相匹配。

3、组件中的作用域问题：在某些情况下，可能需要在组件的方法中使用 $i18n 对象。如果在方法中无法访问到 $i18n 对象，可能是因为作用域的问题。你可以尝试使用箭头函数或将 $i18n 对象保存在组件的局部变量中。

例如，在组件的 methods 中使用箭头函数：

methods: {
  handleChangeLanguage: () => {
    // 在此处可以访问 $i18n 对象
    // ...
  }
}

或者在组件的 created 钩子中保存 $i18n 对象到局部变量：

created() {
  this.i18n = $i18n; // 保存 $i18n 对象到局部变量
},
methods: {
  handleChangeLanguage() {
    // 在此处通过 this.i18n 访问 $i18n 对象
    // ...
  }
}

请检查以上情况，并确保你正确引入了 $i18n 对象，并在组件中的作用域内能够访问到它。

以下答案参考newbing,回答由博主波罗歌编写：
根据你提供的信息，问题可能出现在以下几个方面：

  1. 变量作用域问题：在点击切换语言时，语言切换的操作可能在i18n字典的作用域之外。请确保切换语言的操作在i18n字典的作用域内部。

  2. 引入位置问题：请确保i18n.js文件正确引入，并且在需要使用i18n的地方之前进行引入。换句话说，确保你在使用i18n之前已经正确地引入了i18n.js。

  3. 代码错误：检查一下你的代码，看看是否有其他地方误将i18n变量重写或者未正确初始化导致报错。

另外，你可能需要提供更多的代码和错误信息，这样才能更加准确地定位问题。
如果我的回答解决了您的问题，请采纳！

  • 这篇博客: 前端不使用 i18n，如何优雅的实现多语言？中的 2.  实现思路 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 思路其实比较简单，但是复杂的需求往往离不开后端大佬支持！下面我们一起来捋一捋我们的实现思路(假设我们现在的需求是三个地区的语言：简体中文、繁体中文、英文)！

    ① 既然我们再 ERP 上需要有一个 language 的功能供客户去操作语言，考虑到客户还可能设置默认语言，添加多种不同地区的语言，所以我们的 UI 可以像下图设计的那样；

     ② 新增完地区语言以后我们该如何让去修改、新增的不同地区的语言呢？我们这个时候就需要 一个子页面，负责新增当前 key 的多语言，查询当前 key 的多语言去做修改，看完下图你就会明白啦！！！ 

     ③经过以上两个步骤我们已经成功的让客户实现了想要的效果，但是我们要怎么把后端大哥保存好的东西拿过来用呢

    1. 保存时的数据结构：

    {
 key: "Status"
 texts:[
   {
     "languageName": "en-GB",
     "text": "Status"
   },
   {
     "languageName": "zh-CN",
     "text": "状态"
   },
   {
     "languageName": "zh-HK",
     "text": "狀態"
   }
 ]
}

    关于ERP 查询时的数据结构这里就不一一列举了，和上面类似！

    2. ERP | H5 | 微信小程序 用时查询的数据结构：

    // ERP | H5 | 微信小程序 用时的查询
// language_texts 是我们再 SQL Table 中存储的所有多语言集合

language_texts : {
    key : 当前语言的value, // 如何知道当前语言，我们稍后再说
    key : value,
    key : value,
    ... : ...
    ... : ...
}

    3. 前端如何使用已经保存好的数据结构呢？

        其实有了上面查询我们就可以用到 language_texts[ key ] 的方式去取出来我们想要的语言数据；使用的话也比较简单，js html 中的不同使用方法下面给大家一 一讲解 ；

        值得我们思考的问题是 我们该何时把 当前语言集全部查询出来？

    我这里采用的方案是在 new Vue 之前去调用我们当前的 VFrame方法，这样我们可以确保 我们的多语言所有的 [ key ] [ value ] 可以成功加载，具体步骤请看下方！