Nuxt3项目中Storybook构建后i18n功能失效问题求助

问题分析 #

组件在Nuxt开发环境和Storybook开发模式下能正常调用useI18n，但Storybook静态构建后出现报错。核心原因是构建后的Storybook脱离了Nuxt上下文，无法自动加载Nuxt的i18n配置，且常规Vue3的i18n初始化方式未适配Nuxt封装的useI18n逻辑。

可行解决方案 #

1. 抽离共享的i18n配置 #

• 创建i18n/shared.ts文件，存放通用的i18n基础配置：

import fr from './translations/fr.json'
import en from './translations/en.json'

export const i18nBaseConfig = {
  legacy: false,
  locale: 'en',
  messages: {
    en,
    fr,
  },
}

• 修改原i18n.config.ts，复用上述共享配置：

import { i18nBaseConfig } from './shared'

export default defineI18nConfig(() => {
  return i18nBaseConfig
})

2. 在Storybook中初始化Vue I18n并适配Nuxt的useI18n #

在.storybook/preview.ts中完成以下配置：

import type { Preview } from '@storybook/vue3'
import { createI18n } from 'vue-i18n'
import { i18nBaseConfig } from '../i18n/shared'
import { useI18n as useNuxtI18n } from '#imports'

// 创建Vue I18n实例
const i18n = createI18n(i18nBaseConfig)

const preview: Preview = {
  decorators: [
    (story) => ({
      components: { story },
      setup() {
        // 模拟Nuxt的useI18n逻辑，确保组件能正常调用
        const currentI18n = useNuxtI18n ? useNuxtI18n() : i18n.global
        
        return {
          t: currentI18n.t,
          locale: currentI18n.locale,
          switchLocale: currentI18n.switchLocale,
          // 组件用到其他i18n方法可在此补充
        }
      },
      template: '<story />',
    }),
  ],
  // 将i18n插件注册到Storybook的Vue应用中
  setup(app) {
    app.use(i18n)
  },
}

export default preview

3. 配置Storybook识别Nuxt的路径别名 #

在.storybook/main.ts中添加Vite别名配置，让Storybook能解析Nuxt的#imports路径：

import type { StorybookConfig } from '@storybook/vue3-vite'

const config: StorybookConfig = {
  // 其他Storybook配置（如stories、addons等）
  viteFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '#imports': '../.nuxt/imports.d.ts',
    }
    return config
  },
}

export default config

4. 调整构建脚本确保依赖文件存在 #

修改package.json中的构建脚本，先执行Nuxt的prepare命令生成必要的声明文件：

{
  "scripts": {
    "storybook:build": "nuxt prepare && storybook build"
  }
}

验证方式 #

执行npm run storybook:build完成构建后，用静态文件服务（如npx serve storybook-static）启动构建产物，检查组件的i18n功能是否正常运行且无报错。

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