Vue3/Nuxt3迁移至Vite后，如何在函数内实现文件导入？

在Vue3/Nuxt3切换到Vite后，CommonJS的require()不再被支持，同时静态import无法在函数内部动态使用，针对你提供的动态加载语言文件的场景，有以下几种可行方案：

方案一：使用ES动态import()（异步方式） #

Vite原生支持ES模块的动态import()，它会返回Promise，因此需要将原同步函数改为异步函数：

export async function getTranslationsByKey(key) {
  // 用Promise.all并行加载所有语言文件
  const locales = await Promise.all(LOCALES.map(async (locale) => {
    // 动态导入对应语言文件
    const file = await import(`./${locale.iso}/index.js`)
    // 注意：如果文件用export default导出，需要取file.default；若为具名导出则直接用file
    return {
      [locale[key]]: { ...file.default },
    }
  }))
  
  // 将数组中的对象合并为一个（可根据需求调整返回格式）
  return Object.assign({}, ...locales)
}

注意事项： #

• 调用该函数时需要使用await或者.then()处理异步结果
• 动态导入的路径需要符合Vite规则，必须包含部分静态路径（示例中./和/index.js为静态部分，符合要求）

方案二：预加载所有语言文件（同步方式） #

如果你的语言包数量不多，可以直接在模块顶部静态导入所有文件，再通过映射表在函数中使用：

// 提前导入所有语言文件
import enTrans from './en/index.js'
import zhTrans from './zh/index.js'
// 其他语言包依次导入...

// 建立语言标识到文件内容的映射
const translationMap = {
  en: enTrans,
  zh: zhTrans,
  // 对应LOCALES中的iso字段
}

export function getTranslationsByKey(key) {
  const locales = LOCALES.map((locale) => {
    const file = translationMap[locale.iso]
    return {
      [locale[key]]: { ...file },
    }
  })
  
  return Object.assign({}, ...locales)
}

优势： #

• 函数保持同步，调用时无需处理异步逻辑
• 代码简单直观，适合语言包数量较少的场景

方案三：利用Nuxt3官方i18n模块 #

如果你使用Nuxt3，推荐直接使用官方的@nuxtjs/i18n模块，它已封装语言文件的动态加载逻辑：

1. 安装模块：

npm install @nuxtjs/i18n

2. 在nuxt.config.ts中配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: LOCALES.map(locale => ({ 
      code: locale.iso, 
      name: locale.name // 语言名称，可选
    })),
    defaultLocale: 'en', // 默认语言
    vueI18n: {
      legacy: false, // 禁用Vue I18n的legacy模式，适配Vue3
      lazy: true, // 开启懒加载
      langDir: './locales/', // 语言文件存放目录（比如locales/en.js）
    }
  }
})

3. 在组件或函数中使用：

import { useI18n } from 'vue-i18n'

export function getCurrentTranslations() {
  const { t, locale } = useI18n()
  // 直接使用t()获取翻译，或通过locale切换语言
  return {
    currentLocale: locale.value,
    translations: t('*') // 获取当前语言的所有翻译
  }
}

优势： #

• 完全适配Nuxt3生态，无需自己维护加载逻辑
• 支持语言懒加载、路由国际化等高级功能

内容的提问来源于stack exchange，提问作者CBD