vue项目国际化方案vue-i18n,i18n-all使用

最新推荐文章于 2025-11-06 15:43:18 发布

原创

最新推荐文章于 2025-11-06 15:43:18 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vscode #前端

vue国际化一般使用 vue-i18n 这个库也是比较多管理后台使用的国际化方案。用它就对了，详情看下官网。

剩下的是对国际化方案的考虑：

前端静态语言文件的方式配置国际化
后台管理的方式，读取国际化语言包
- 考虑把语言包缓存到前端，
- 首屏加载，缓存默认语言包，切换语言继续缓存语言包

vscode 插件，使用 i18n-ally ，可以多语言开发

注意：需要配置 vue-i18n 工具使用预览才生效

效果图：

在这里插入图片描述

vscode setting.json 配置文件，需要自定义语言文件目录的项目，需要配置相关参数，才能生效

{
   
   
  "i18n-ally.localesPaths": [
    "src/lang" // 相对于项目根目录的语言环境目录路径
  ],

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

追求者2016

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue国际化教程

renkai721的专栏

09-14

4167

ruoyi国际化,vue国际化,springboot国际化,i18n国际化,vue菜单国际化不起作用,vue页面刷新国际化失效

【Vue I18n 国际化插件】vue3+vue-i18n 项目实战总结

工作的日常记录和平凡的生活分享

04-08

1万+

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

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

如何在VS Code中使用i18n-ally，轻松管理你的多语言项目

sg_knight的专栏

09-12

1139

本文介绍了VS Code插件i18n-ally，它能高效管理多语言项目中的翻译文件。该插件提供集中管理界面、智能补全、代码高亮、未翻译检测等功能，支持JSON/YAML等格式，可自动同步修改并批量处理缺失翻译。通过简单配置即可优化国际化工作流程，适用于Vue/React等框架开发，是提升多语言项目管理效率的利器。

前端国际化之i18n（VUE项目）

最新发布

tianqiyuhan的博客

11-06

1686

i18n，全名是internationalization，称为国际化。我理解的就四个字：语言转换。让以其他语言作为母语的人能看懂你的前端中的文字。我们常用的就是中文简体（zh_CN）与英文（美国）（en_US）的转换。当然也可以增添中文繁体（zh_TW）等等你想要的其他语言。最好在项目初期就计划使用国际化，这样相对后期使用会大大减少工作量。1，在你的软件中打开控制台我使用的是IDEA，其实前端更推荐使用VSCod

【前端】i18n Ally插件使用

lcukyNwa的博客

03-05

7885

再如我的翻译文本是en.json和zh-CN.json，都在src目录下的lang/package下，配置就如下。比如我的翻译文件en.ts和zh-CN.ts，都在src目录下的locales目录，配置就如下。由于每个项目的语言可能做的都不一样，会导致无法找到真正的路径位置，所以我推荐。在项目的根目录找到.vscode再找到settings.json编辑它。如果发现翻译是英文的则看下vscode右下角的en改一下即可。vscode扩展搜i18n Ally。

多语言插件i18n Ally的使用

小尘的博客

01-17

953

2.第二步在setting.json里面配置。以zh.json和en.json的用这个。以zh.ts和en.ts结尾的用这个。1.第一步首先在vscode下载插件。要区分文件是js，ts或json结尾。

【亲测免费】 i18n-ally 使用教程

gitblog_00961的博客

08-13

2348

i18n-ally 使用教程项目介绍 i18n-ally 是一个为 VS Code 设计的国际化扩展插件，旨在简化前端项目的国际化流程。它支持多种框架和库，如 Vue、React、Angular 等，并提供了强大的机器翻译功能和便捷的翻译管理界面。项目快速启动安装 i18n-ally 打开 VS Code。进入扩展市场，搜索 i18n-ally。点击安装。配置 i18n-ally ...

前端国际化 VScode i18n Ally 插件使用

qq_45739293的博客

05-11

7470

前端国际化 VScode i18n Ally 插件使用 1、安装 i8n Ally 插件 2、修改vscode 配置，添加如下配置 "i18n-ally.localesPaths": [ "src/locales/lang" ], "i18n-ally.languageTagSystem": "legacy", "i18n-ally.sourceLanguage": "en-US", "i18n-ally.displayLanguage": "zh-CN", "i18n-all

vue-i18n-xlsx:一个把 vue 项目中的翻译提取到 excel 以及输出到 js 文件的命令行工具

05-05

将excel的翻译导入进项目的指定目录里面，按照vue-i18n的翻译格式生成js文件可以将除了该分支下的别的分支的翻译一并合在一起用法 i18n-xlsx -p, --path [value] 指定要收集翻译的项目路径 i18n-xlsx -b, --branch...

vue-i18n 实现国际化，支持切换不同语言

m0_58565372的博客

07-03

6963

4.如果后端有选择是哪个语言，我们将其传给了后端，后端讲其存入了用户表，用户登录之后，会在用户接口里，返回给我们，我们将其存 localStorage,这时候，就算用户再次退出到登录页面，我们就可以将用户默认语言做一个判断，判断存入localStorage的language是否有值，如果有值，则登录页面的语言取localStorage的language，如果没有，则还是取后端语言接口返回的第一个值,这样，就可以把用户已经选择过的语言，在登录页面也能进行判断用户习惯。需求：后台管理系统，可以实现语言切换。

使用vue-i18n进行项目国际化

小冷_Blog

09-09

3414

vue-i18n方案文档简介安装 npm i -S vue-i18n 配置 cd project-path/src/*** mkdir i18n cd i18n touch index.js mkdir lang touch zh-CN.js en-US.js 1.zh-CN.js和en-US.js为具体语言包； 2.index.js负责实例化V...

vue国际化

weixin_52923266的博客

06-15

214

对于一些跨国项目来说，国际化是尤为重要的，那么什么要国际化呢?国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用。

Vue国际化

daliandianzi的博客

06-24

276

使用vue-i18n完成vue国际化 1.安装vue-i18n npm add vue-i18n 2.在src下新建i18n目录，并创建一个index.js。 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注册i18n实例并引入语言文件，文件格式等下解析 const i18n = new VueI18n({ locale: 'zh_cn', messages: { 'zh_cn': re

vue-国际化

KK_DU

10-21

371

安装i18n: npm install vue-i18n –save 目录结构： cn.js里的内容： 4.en.js里的内容： 5.index.js里的内容： 6.i18n.js里的 main.js里引入i18n.js html: Js: 效果图：（elementui样式被改过不上css代码了） ...

vue的国际化

qq_43505774的博客

08-13

339

在src目录下面建立语言包 common下的ch.js module.exports = { message: { login: '登录', Username: '用户名', Password: '密码', Captcha: '验证码', Language: '语言', zh: '中文', en: '英文' } } index.js import VueI18n from 'vue-i18n' Vue.use(VueI18n);

Vue3中，国际化插件vue-i18n使用记录，配合VSCode自动化翻译插件i18n Ally

热门推荐

qq_51532249的博客

06-28

1万+

记录了国际化插件vue-i18n在Vue3中的使用，以及VSCode自动化翻译插件i18n Ally的使用。

Vue国际化（vue-i18n）

windgentle的博客

10-27

1016

一、安装三种方式： 1、script引入 2、npm安装 npm install vue-i18n 3、yarn安装 yarn add vue-i18n 二、配置 main.js文件配置 1.引入i18n国际化插件 import Vue from ‘vue’ import VueI18n from ‘vue-i18n’ Vue.use(VueI18n) 2.注册i18n实例并引入语言文件，文件格式等下解析 const i18n = new VueI18n({ locale: ‘zh’, // 定义

vscode i18n-ally 插件的使用

q915730058的博客

10-20

4350

1.安装i18n-ally 2.设置 ->setting.json 里配置 // i18n插件配置 "i18n-ally.localesPaths": "src/assete/lang", // 自己多语言的路径 "i18n-ally.dirStructure": "file", "i18n-ally.keystyle": "nested",

vue国际化（多语言）

ZhouHui优快云

06-08

9792

vue国际化（多语言）

vue-i18n/dist/vue-i18n.esm-bundler.js

10-23

<think>我们正在处理关于Vue国际化报错的问题，用户特别询问了`vue-i18n/dist/vue-i18n.esm-bundler.js`文件的相关信息，以及它如何与之前的报错信息关联。报错信息："The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'app.newChat'" 根据引用[1]中的解决方案，提到了在vite配置中设置别名： resolve: { alias: { 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' } } 注意：这里使用的是`vue-i18n.runtime.esm-bundler.js`，而不是`vue-i18n.esm-bundler.js`。这两个文件有什么区别呢？根据vue-i18n的文档和源码结构： - `vue-i18n.esm-bundler.js`: 这是完整的运行时构建，包含了消息编译器（message compiler），因此它可以在运行时编译消息格式（比如带有插值的字符串）。但是，这会导致包体积变大，并且可能需要不安全的eval（在CSP严格的环境中会有问题）[^1][^5]。 - `vue-i18n.runtime.esm-bundler.js`: 这是运行时构建，不包含消息编译器。使用这个版本时，我们需要预编译消息（比如在构建阶段将消息格式转换成函数），以避免在运行时进行编译。报错的原因就是因为我们使用了不包含消息编译器的运行时构建（vue-i18n.runtime.esm-bundler.js），但是却没有预编译消息，导致在运行时无法编译消息格式，于是翻译函数直接返回了key（'app.newChat'）而不是翻译后的文本。因此，解决这个报错有两种思路： 1. 使用完整的构建（包含消息编译器）：将别名指向`vue-i18n.esm-bundler.js`（注意：不是runtime的版本）。这样在运行时就可以编译消息了。但是，这样会增大包体积，并且在严格的CSP环境中可能因为使用new Function或eval而出现问题[^1][^5]。 2. 继续使用运行时构建（不包含消息编译器），但是需要预编译消息：在构建阶段通过插件（如`@intlify/vite-plugin-vue-i18n`或`@intlify/vue-i18n-loader`）将语言文件中的消息预编译成函数。这样在运行时就不需要编译器了，从而避免了报错，并且减少了包体积，也符合CSP要求。在之前的回答中，我们已经推荐了第二种方法（预编译消息），因为它是更优的解决方案。但是，如果用户因为某些原因（比如项目较小或者开发阶段快速原型）想要使用第一种方法，可以这样配置别名（以Vite为例）： ```javascript // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ // ...其他配置 resolve: { alias: { // 修改为完整版（包含编译器） 'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js' } } }) ``` 这样配置后，vue-i18n就会使用包含消息编译器的版本，从而在运行时能够编译消息格式，就不会出现上述报错了。但是，请注意使用完整版的缺点： - 包体积增大（因为包含了编译器） - 可能违反CSP（内容安全策略）[^1][^5] 因此，对于生产环境，还是强烈建议使用预编译的方式。另外，引用[2][^2]和引用[3][^3]提到了类似的Vue警告，是关于运行时模板编译的。Vue本身也有两个版本：运行时版本和完整版（包含模板编译器）。当使用运行时版本的Vue，却试图在组件中使用字符串模板（而不是预编译的渲染函数）时，就会出现类似的警告。解决方法也是类似的：要么使用别名切换到完整版，要么在构建时预编译模板（比如通过vue-loader）。这进一步印证了我们的思路。引用[4][^4]提到了Vue3的模块化和Tree-Shaking特性，引用[5][^5]则解释了Vue不同构建版本的区别。这些都有助于理解为什么默认使用的是运行时版本（为了更好的Tree-Shaking和更小的体积）。总结： - 报错是因为使用了不包含消息编译器的vue-i18n运行时构建，且未预编译消息。 - 通过配置别名使用`vue-i18n.esm-bundler.js`（完整版）可以解决，但会增大体积并可能带来CSP问题。 - 推荐使用预编译消息的方式（构建时编译），这样可以使用运行时构建（`vue-i18n.runtime.esm-bundler.js`）并避免报错，同时保持体积和安全性。现在，我们可以回答用户的问题：`vue-i18n/dist/vue-i18n.esm-bundler.js`是包含消息编译器的完整构建版本，使用它可以避免上述报错（但需注意缺点）。而默认的运行时构建（`vue-i18n.runtime.esm-bundler.js`）则需要预编译消息。在用户之前的项目中，如果配置了别名指向运行时构建（如引用[1]中的配置），那么就需要预编译消息。如果没有配置，则默认情况下，vue-i18n可能会根据模块入口（package.json中的module字段）来加载，而vue-i18n的package.json中module字段指向的是`dist/vue-i18n.runtime.esm-bundler.js`（运行时构建）。因此，如果我们没有显式配置别名，那么默认也是运行时构建，所以需要预编译消息。因此，检查项目中是否配置了别名，以及是否进行了消息预编译，是解决这个问题的关键。 </think>### `vue-i18n/dist/vue-i18n.esm-bundler.js` 解析与报错关联 #### 文件核心作用 `vue-i18n/dist/vue-i18n.esm-bundler.js` 是 vue-i18n 提供的 **完整运行时构建版本**，包含消息编译器和国际化功能的核心实现。与运行时专用版本 `vue-i18n.runtime.esm-bundler.js` 的关键区别在于： | 特性 | `vue-i18n.esm-bundler.js` | `vue-i18n.runtime.esm-bundler.js` | |-------|---------------------------|-----------------------------------| | **消息编译器** | 包含 | 不包含 | | **运行时编译** | 支持 | 不支持 | | **包体积** | 较大 | 较小 | | **CSP兼容性** | 可能受限 | 更安全 | | **预编译需求** | 非必需 | 必需 | #### 与报错的直接关联报错信息 `The message format compilation is not supported...` 的根本原因是： 1. 项目中实际使用的是 **运行时专用版本** (`vue-i18n.runtime.esm-bundler.js`) 2. 该版本**移除了消息编译器** (Message Compiler)，禁止运行时动态编译翻译字符串[^1] 3. 当检测到未预编译的消息格式（如 `$t('app.newChat')`）时，直接返回原始键名 #### 解决方案对比 ##### 方案1：切换到完整构建（快速修复） ```javascript // vite.config.js export default defineConfig({ resolve: { alias: { // 指向完整构建版本 ⇩ 'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js' } } }) ``` **效果**: - 启用内置消息编译器 - 支持运行时动态编译翻译模板 - 立即解决报错问题 **代价**: - 增加约15-20KB包体积 - 可能触发CSP限制（需添加`'unsafe-eval'`策略）[^5] - 失去Tree-Shaking优化机会[^4] ##### 方案2：保持运行时构建 + 预编译（推荐） ```javascript // 保持运行时构建 ⇩ alias: { 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' } ``` 同时配置预编译： ```bash npm install @intlify/vite-plugin-vue-i18n ``` ```javascript // vite.config.js import vueI18n from '@intlify/vite-plugin-vue-i18n' export default defineConfig({ plugins: [ vueI18n({ include: 'src/locales/*.json' }) ] }) ``` **优势**: - 保留Tree-Shaking优化[^4] - 更小的生产包体积 - 严格CSP兼容（无运行时eval）[^5] - 编译错误在构建阶段暴露 #### 决策建议 | 场景 | 推荐方案 | |------|----------| | 原型开发/快速验证 | 完整构建 (`vue-i18n.esm-bundler.js`) | | 中型/大型项目 | 运行时构建 + 预编译 | | CSP严格环境 | 必须使用预编译方案 | | 性能敏感场景 | 运行时构建 + 预编译 | > **关键机制**：当使用运行时构建时，所有带插值的翻译字符串（如 `Hello {name}!`）必须在构建阶段转换为JavaScript函数。完整构建则会在运行时通过 `new Function()` 即时编译[^1][^5]，这也是CSP限制的根源。