使用指南：Vite 插件 Vue I18n 完全解析

使用指南：Vite 插件 Vue I18n 完全解析

vite-plugin-vue-i18n 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-vue-i18n

Vite 插件 Vue I18n 是一个专为 Vue.js 应用设计的国际化插件，支持 Vue I18n 的最新特性，以及性能优化。本指南将详尽解释如何安装、配置和高效利用该插件。

安装方式

NPM 用户

在您的项目根目录下执行以下命令以添加此插件：

npm i --save-dev @intlify/vite-plugin-vue-i18n

Yarn 用户

若您偏好 Yarn，可以运行这个命令来添加依赖：

yarn add -D @intlify/vite-plugin-vue-i18n

项目的使用说明

基础配置

首先，在 Vite 配置文件（通常是 vite.config.js 或者 vite.config.ts）中引入并配置 vue 和 vue-i18n 插件：

// vite.config.ts 示例
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/vite-plugin-vue-i18n';

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      // 若要兼容 Legacy API，请取消注释这行并设置为 false
      // compositionOnly: false,
      // 设置资源文件路径
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    }),
  ],
});

确保您已正确导入 path 模块，如果您在 TypeScript 环境下，则需要合适的类型定义。

i18n 资源预编译

从 vue-i18n v9 开始，推荐预编译资源。示例代码展示了如何配置预编译消息，并在组件中通过 Composition API 使用翻译功能。

组件中的 i18n 自定义块

在 Vue 单文件组件（SFC）中，您可以直接包含 i18n 块来存放多语言字符串：

<template>
  <div>{{ $t('greeting') }}</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent();
</script>

<!-- i18n 块 -->
<i18n>
{
  "en": {
    "greeting": "Hello, World!"
  },
  "zh": {
    "greeting": "你好，世界！"
  }
}
</i18n>

项目API使用文档

动态导入多语言资源

可以通过 Vite 的特殊语法一次性导入所有指定路径下的多语言文件：

import messages from '@intlify/vite-plugin-vue-i18n/messages';
// ...
const i18n = createI18n({
  messages,
});

高级选项

• runtimeOnly: 控制生产环境是否仅打包运行时版本的 Vue I18n。
• compositionOnly: 默认情况下仅支持 Composition API，如需使用 Legacy API，需设为 false。
• include: 指定要预先处理的国际化资源文件的路径模式。

总结

通过以上步骤，您可以顺利集成 Vite 插件 Vue I18n 到项目中，实现高效的国际化管理。理解每个配置项的作用对于最大化利用该插件至关重要。务必留意 Vue I18n 的升级，以及其对 Composition API 的偏重，以保持应用的最佳实践。

vite-plugin-vue-i18n 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-vue-i18n