如何在Nuxt3子项目中复用父项目nuxt.config.ts中的函数？

可以通过抽离公共函数到独立文件的方式实现，无需额外依赖或复制代码，具体步骤如下：

1. 在ProjectA中抽离公共函数 #

在ProjectA根目录下创建utils/config-helpers.ts文件，将nuxt.config.ts里的公共函数移到这个文件并导出：

export function getTheme(theme: string){
  return `~/assets/themes/${theme}/css/main.css`;
}

export function getLogo(theme: string){
  const baseUrl = process.env.NUXT_APP_BASE_URL || '';
  return `${baseUrl}themes/${theme}/images/logo.png`;
}

2. 更新ProjectA的nuxt.config.ts #

修改ProjectA的配置文件，导入刚才抽离的函数，保持原有功能正常运行：

import { getTheme, getLogo } from './utils/config-helpers';

export default defineNuxtConfig({
  // 保留原有其他配置
  // 示例：如果之前在css配置中用到getTheme
  css: [getTheme(process.env.NUXT_APP_THEME || 'default')],
  // ... 其他配置项
})

3. 在ProjectB中导入并使用函数 #

直接通过相对路径从ProjectA的工具文件导入函数，在ProjectB的nuxt.config.ts中使用：

import { getTheme, getLogo } from '../ProjectA/utils/config-helpers';

export default defineNuxtConfig({
  extends: '../ProjectA',
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
    {
      path: '../ProjectA/components',
      pathPrefix: false,
    },
  ],
  // 示例使用场景
  css: [getTheme(process.env.NUXT_APP_THEME || 'default')],
  app: {
    head: {
      link: [{ rel: 'icon', href: getLogo(process.env.NUXT_APP_THEME || 'default') }]
    }
  }
})

原理说明 #

Nuxt的extends主要负责继承配置对象，但不会自动暴露配置文件内部的函数。通过将公共逻辑抽离到独立的工具文件，利用Node.js的相对路径模块导入机制，就能让两个项目共享这些函数，同时保证代码只维护一份，无需复制或额外依赖。

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