不同的发行文件

在 npm 包的 dist/ 目录 中，你会发现 Vue I18n 的许多不同构建版本。以下是根据不同使用场景应使用的 dist 文件的概述。

通过 CDN 或无捆绑器使用

• vue-i18n(.runtime).global(.prod).js:
  • 用于通过 <script src="..."> 在浏览器中直接使用。暴露了 VueI18n 全局变量
  • 浏览器内消息格式编译:
    • vue-i18n.global.js 是"完整"构建，包含编译器和运行时，因此支持实时编译消息格式
    • vue-i18n.runtime.global.js 仅包含运行时，需要在构建步骤期间预编译消息格式
  • 内联所有 Vue I18n 核心内部包 - 即它是一个单文件，不依赖其他文件。这意味着你必须从该文件导入所有内容并仅使用该文件以确保获得相同代码实例
  • 包含硬编码的生产和开发分支，生产构建提前被压缩。在生产环境中使用 *.prod.js 文件

注意

全局构建不是 UMD 构建。它们是 IIFEs 构建，仅用于通过 <script src="..."> 直接使用。

• vue-i18n(.runtime).esm-browser(.prod).js:
  • 通过原生 ES 模块导入 (浏览器通过 <script type="module">) 使用
  • 与全局构建共享相同的运行时编译、依赖内联和硬编码的生产和开发行为

使用捆绑器

• vue-i18n(.runtime).esm-bundler.js:
  • 用于 webpack、rollup 和 parcel 等捆绑器
  • 保留生产和开发分支，使用 process.env.NODE_ENV 保护 (必须由捆绑器替换)
  • 不提供压缩构建 (应在捆绑后与其他代码一起压缩)
  • 导入依赖项 (例如 @intlify/core-base, @intlify/message-compiler)
    • 导入的依赖项也是 esm-bundler 构建，反过来会导入它们的依赖项 (例如 @intlify/message-compiler 导入 @intlify/shared)
    • 这意味着你可以单独安装/导入这些依赖项而不会最终出现不同实例，但你必须确保它们都解析到相同版本
  • 浏览器内本地化消息编译:
    • vue-i18n.runtime.esm-bundler.js 仅包含运行时，需要所有本地化消息预先编译。这是捆绑器的默认入口 (通过 package.json 中的 module 字段)，因为使用捆绑器时模板通常是预先编译的 (例如在 *.json 文件中)
    • vue-i18n.esm-bundler.js (默认): 包含运行时编译器。如果你使用捆绑器但仍希望本地化消息编译 (例如通过内联 JavaScript 字符串的模板)，请使用此构建。要使用此构建，请将导入语句更改为: import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";

注意

如果你使用 vue-i18n.runtime.esm-bundler.js，你需要预先编译所有本地化消息，你可以使用 .json (.json5) 或 .yaml、i18n 自定义块来管理 i18n 资源。因此，你可以使用捆绑器和以下加载器/插件预先编译所有本地化消息。

• @intlify/unplugin-vue-i18n

对于 Node.js (服务器端)

• vue-i18n(.runtime).node.js:
  • 用于 Node.js 中的 ES 模块使用
  • 通过 import 在 Node.js 中使用
  • 生产/开发文件是预构建的，但根据 process.env.NODE_ENV 自动选择适当文件
  • 此模块是 vue-i18n(.runtime).js 的代理模块
    • vue-i18n.runtime.node.js: 仅包含运行时。
    • vue-i18n.node.js: 包含运行时编译器。