Vue3 - 在项目中使用vue-i18n不生效的问题

最新推荐文章于 2025-06-16 17:00:18 发布

程序员的成长之路

最新推荐文章于 2025-06-16 17:00:18 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42914528/article/details/139885597

Vue3 专栏收录该内容

12 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

检查和配置 Vue I18n

确保你已经正确安装了Vue I18n并且配置了组合API模式。

安装 Vue I18n

npm install vue-i18n@next

配置 i18n.js

import { createI18n } from 'vue-i18n';
import messages from './messages';

const i18n = createI18n({
  legacy: false, // 使用组合 API 模式
  locale: 'en', // 设置默认语言
  messages, // 多语言内容
});

export default i18n;

如果没有配置 legacy: false，使用会报错。

如果你的多语言文件是 message.js，那么可以按照上图进行配置。

如果你是这样子的写法，或者其他的语法：

那么，你的js配置就要改一下了：

import { createI18n } from 'vue-i18n';
import en from "@/i18n/en";
import zh from "@/i18n/zh";

c

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员的成长之路

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

vue3 - vue-i18n 解决报错 Uncaught SyntaxError: Not available in legacy mode，vue使用vue-i18n国际化多语言浏览器控制台报错

高级前端工程师

07-04

2294

vue3，nuxt3，vue-i18n，报错，多语言国际化，vue3 vue-i18n报错，Uncaught SyntaxError: Not available in legacy mode，还是报错，vue-i18n插件报错，legacy，把legacy设置成false还是报错，Vue3国际化vue-i18n简繁体及英文切换，this.$t报错，如何解决这个错误，实现国际化语言切换控制台报错，爆红，vite，webpack，无法打包，项目无法启动，VUE3使用vue-i18n插件进行国际化多语言时报错，

vue-i18n国际化在data中切换不起作用

jieweiwujie的博客

09-17

1302

1 npm install vue-i18n 2引入插件包 // 引入插件和语言包 import VueI18n from 'vue-i18n' import zh from '@/i18n/langs/zh' import en from '@/i18n/langs/en' Vue.use(VueI18n) 3实例化 //实例化vue-i18n const i18n = new VueI18n({ // 从本地存储中取，如果没有默认为中文， // 这样可以解决切换语言后，没记住选择的语

1 条评论您还未登录，请先登录后发表或查看评论

vue3国际化i18n切换部分未生效

weixin_33913005的博客

12-12

1504

每次切换中英文，路由菜单都会重新更新，有多少条数据就会告警多少次，个人仔细检查代码感觉没有什么依赖问题，唯一就是路由数据变化，会重新更新视图。菜单采用的动态路由，由于面包屑和菜单标签导航是放存在pinna，在切换时面包屑和菜单标签导航未生效；本次采用方式是，中英文切换调用路由接口(后端回根据前端配置的语言返回对应的数据)；数据不是响应式的，也参考网上说的使用模版字符串方式，还是不行；问题1: 切换语言时，模版标签内的的配置是生效的，配置为字典，常量，表单el-from的rules未生效；

vue国际化i18n切换未生效

Don't disturb me!的博客

07-21

3198

i18n切换语言未生效简洁写法

国际化i18n-不生效排查及响应式方案（以vue2为例）

最新发布

Li_Ning21的博客

06-16

231

文章摘要：本文针对Vue2国际化切换语言不响应的问题，分析了常见错误写法（在data中直接使用this.$t）并提供了三种解决方案：1)在模板中使用$t；2)在computed中处理翻译；3)采用函数式配置项。通过代码示例展示了每种方案的具体实现，包括表格配置项、搜索表单和公共组件的处理方式。文章强调实际测试的重要性，建议开发者根据场景选择合适方案，避免国际化切换失效问题。

vue3引用vue-i18n使用具名格式时失效

元元猿的博客

01-18

1094

也就是导入的i18n文件版本错误，不是所需对应的版本，与Vue本身一样，i18n包提供了各种版本。和Vue一样，它们有一个有和没有运行时编译器的版本。或 import { createI18n } from 'vue-i18n/dist/vue-i18n.esm-bundler';将createI18n的引入改为：import { createI18n } from 'vue-i18n';vue3使用i18n时，vue- i18n的版本不低于@9。当前共有{number}名学员。

vue组件中的国际化i18n在js中使用时未生效的处理

芋头CF的专栏

11-01

8200

转自我的简书：https://www.jianshu.com/p/9e018002976e 在国际化i18n组件使用中，我们之前的用法有点错误，我总结一下哈：在vue组件的中使用 <template> <div> <div class="page-header-title">{{$t("m.RegisterTitle[1]")}}&lt...

vue3 element-plus i18n form表单校验 rules message i18n 不生效

qq_38426136的博客

12-22

847

后续发先不对劲这怎么改都改不动发现是数据没热更新。发现会有问题会导致会有双引号。用了computed去写。

vue3 ts defineProps()设置i18n无效

tdjqqq的博客

04-01

1497

我想在组件中的默认值中defineProps()中设置国际化，本组件就是一个form表单，其中有查询按钮，及重置按钮，原本是写活，可以在调用时，自己设置，但现在要求要配置国际化。大致意思是就是，在defineProps中，你不可以设置变量形式的内容，因为国际化t('')是个函数，所以导致了的错，组件默认值不可以用变量形式，现在可以自己切换了，提示，目前我的切换后必须要刷新一下页面，不知道为什么i18n在普通ts\js文件中设置是无法无刷新切换的。2.2 在普通.ts文件，或者.js文件中使用。

vue3使用vue-i18n实现国际化

@必意玲

04-01

4371

vue-i18n。

关于在自行封装的组件库中（使用vue-class-component）使用Vue-i18n无法正常翻译的解决办法

Wrysmile0308的博客

07-05

1077

大家或多或少都用过别人封装的组件库，甚至有人或者公司内有自行封装的一些公用组件库，而国际化翻译现在已经是各大项目中必不可少的一个插件了，但组件库中使用i18n进行翻译的时候可能遇到过以下这种问题，希望我的一点分析可以帮到你们。

Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】

蓝胖子的博客

03-05

1048

Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】

Vue-i18n国际化不能使用函数变量

玛已的小空间

09-26

1080

Vue-i18n国际化不能使用函数变量的排查过程

Vue3中使用i18n，this.$t报错

u010741500的博客

04-24

3706

/需要把$t手动挂载到全局。

足球大数据升级到vue3.0时i18n国际化插件无法使用的解决方案

yangzhaoliu8的博客

01-11

663

我的Make310.com足球大数据（奥创体育）升级到VUE3.0时，发现原来VUE2.0的版本无法正常工作。由于版本原因，原I18n无法使用了。同学们先更新版本。 npm install vue-i18n@next npm install vue-i18n@next npm install vue-i18n@next 我使用的"vue-i18n": “^9.0.0-beta.17”,版本开始兼容vue3.0。其它配置跟原来的不变。挂载方式要按VUE3.0的方式挂载即可。 //语言 import.

【Vue】使用 vue-i18n 报错问题解决（一）

yqyn6的博客

05-04

7445

解决报错 Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:1) at createCompileError (message-compiler.esm-bundler.js:54:1) at createI18nError (vue-i18n.esm-bundler.js💯1)

vue-i18n的 alpha 版本导致线上环境多语言异常

m0_47814717的博客

04-28

480

生产环境使用 alpha 版本依赖会导致多语言异常，应使用9.x 版本的 vue-i18n ，它是目前 Vue 3 生态最稳定、最广泛支持的国际化方案。

关于 vue3 在自定义hook中出现的报错问题（更新中）

小文同学的博客

05-19

798

关于 vue3 在自定义hooks中出现的报错问题

vue3中 i18n 使用方法

apple_51417798的博客

08-13

1817

Holle! 我是Boy~，今天我给大家分享以下关于vue3中 i18n 使用方法

i18n ally

06-13

### i18n Ally 工具或插件 i18n Ally 是一个广泛使用的工具，旨在为开发者提供高效的国际化支持。它主要针对现代前端框架（如 Vue.js、React 和 Angular）以及 Node.js 等后端环境[^1]。以下是关于 i18n Ally 的详细信息： #### 功能特点 i18n Ally 提供了丰富的功能来简化国际化开发流程。以下是一些关键特性： - **语法高亮**：在编辑器中对 i18n 键值进行颜色区分，便于识别和维护[^2]。 - **实时翻译**：通过集成在线翻译服务（如 Google Translate），可以快速生成多语言翻译内容[^3]。 - **键值管理**：支持对 i18n 文件中的键值进行搜索、重命名和删除操作，减少手动修改带来的错误风险[^4]。 - **格式化检查**：确保翻译文件遵循正确的 JSON 或 YAML 格式，避免解析错误[^5]。 #### 支持的框架与环境 i18n Ally 兼容多种流行的开发环境和技术栈，包括但不限于： - **Vue.js**：支持 Vue I18n 插件的无缝集成[^6]。 - **React**：兼容 React-i18next 和其他类似的国际化库[^7]。 - **Node.js**：适用于服务器端的 i18n 配置和管理[^8]。 - **其他语言**：支持 Python、Go 等非 JavaScript 项目的国际化需求[^9]。 #### 安装与配置对于 Visual Studio Code 用户，可以直接通过扩展市场安装 i18n Ally 插件。安装完成后，可以通过设置文件调整其行为以满足项目需求[^10]。 ```json { "i18n-ally.defaultLocale": "en", "i18n-ally.locales": ["en", "fr", "es"], "i18n-ally.format": "json" } ``` #### 示例代码以下是一个简单的示例，展示如何在 React 项目中使用 i18n Ally 管理多语言资源： ```javascript import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; const resources = { en: { translation: { "welcome": "Welcome to the application!" } }, fr: { translation: { "welcome": "Bienvenue dans l'application!" } } }; i18n.use(initReactI18next).init({ resources, lng: 'en', interpolation: { escapeValue: false } }); export default i18n; ``` #### 总结 i18n Ally 是一个强大的工具，能够显著提升国际化项目的开发效率。无论是前端还是后端开发者，都可以从中受益，从而更轻松地管理和维护多语言资源[^11]。