TypeScript 中 Vite 怎么配置页面多语言国际化插件集成-js教程-PHP中文网

typescript项目中用vite集成多语言国际化，核心是选用vue-i18n@9、组织语言资源、保障类型安全并实现运行时切换；需配置vite-plugin-vue-i18n插件，用ts模块导出语言文件，创建i18n实例挂载，并通过pinia管理locale状态及持久化。

typescript 中 vite 怎么配置页面多语言国际化插件集成

在 TypeScript 项目中用 Vite 集成多语言国际化，核心是选对插件、组织好语言资源、做好类型推导和运行时切换。Vue 项目推荐 vue-i18n@9（适配 Composition API），React 项目常用 i18next 或 LinguiJS；本文以 Vue3 + TypeScript + Vite 为主，兼顾通用逻辑。

安装与基础插件接入

先装官方推荐的 Vite 插件和运行时库：

npm install vue-i18n@9（注意不是 @next，v9 是当前稳定版）
npm install @intlify/vite-plugin-vue-i18n（用于编译期处理 JSON/YAML 语言文件）

在 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({
      include: resolve(__dirname, 'src/locales/**'),
    }),
  ],
});

语言资源组织与类型安全

把语言文件放在 src/locales/ 下，支持 .json、.ts 或 .yml。推荐用 TypeScript 模块导出，获得完整类型提示：

src/locales/zh-CN.ts 示例：

export default {
  common: {
    hello: '你好',
    logout: '退出登录'
  },
  route: {
    home: '首页',
    about: '关于'
  }
} as const;

配合全局声明文件 src/locales/index.ts 和 src/env.d.ts，可让 t('common.hello') 具备自动补全和类型校验。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

创建 i18n 实例并挂载

新建 src/plugins/i18n.ts：

import { createI18n } from 'vue-i18n';
import zh from '@/locales/zh-CN';
import en from '@/locales/en-US';

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('locale') || 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zh,
    'en-US': en
  }
});

export default i18n;

在 main.ts 中挂载：

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';

createApp(App).use(i18n).mount('#app');

语言切换与持久化

切换语言不只是改 locale，还要同步保存偏好、触发 UI 更新：

用 Pinia 管理语言状态（如 localeStore.ts），避免分散修改
切换时调用 i18n.locale.value = 'en-US' 并写入 localStorage
Element Plus、Ant Design Vue 等组件库会自动响应 locale 变更，无需额外配置
路由菜单、页面标题等动态内容，建议用 useI18n().t() 或 $t() 在 setup 中获取

示例 Hook：

export function useLocale() {
  const i18n = useI18n();
  const setLocale = (lang: string) => {
    i18n.locale.value = lang;
    localStorage.setItem('locale', lang);
  };
  return { locale: i18n.locale, setLocale };
}

不复杂但容易忽略：语言包要按模块拆分、JSON 文件需 UTF-8 编码无 BOM，开发时开启 Vite 的热更新才能实时看到翻译变化。