同根目录Nuxt3项目共享Assets与Public资源的配置方法

针对你的场景，ProjectB已通过extends继承ProjectA但无法访问资源，需要调整配置让Nuxt识别并处理跨项目资源目录，具体修改步骤如下：

1. 清理冗余配置 #

首先删除buildModules中手动引入ProjectA配置的代码——extends: ["../ProjectA"]已经会自动继承ProjectA的Nuxt配置，重复引入反而可能导致冲突。

2. 添加资源别名（Alias） #

在nuxt.config.ts中配置别名，方便在ProjectB代码里直接引用ProjectA的资源，同时让Vite正确解析路径：

export default defineNuxtConfig({
  // 保留现有组件配置
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
    {
      path: "../ProjectA/components",
      pathPrefix: false,
    },
  ],

  extends: ["../ProjectA"],

  // 配置全局别名
  alias: {
    '@a-assets': '../ProjectA/assets',
    '@a-public': '../ProjectA/public'
  },

  // Vite层面的别名配置，确保打包时正确解析
  vite: {
    resolve: {
      alias: {
        '@a-assets': '../ProjectA/assets',
      }
    },
    // 若使用预处理器（如SCSS），添加全局样式路径
    css: {
      preprocessorOptions: {
        scss: {
          // 示例：自动导入ProjectA的全局样式/主题
          additionalData: `@import "@a-assets/styles/global.scss";`
        }
      }
    }
  },
})

3. 处理Public目录资源 #

Public目录资源通过URL直接访问，需在构建时把ProjectA的Public资源同步到ProjectB输出目录，添加Nuxt钩子实现自动复制：

// 在nuxt.config.ts中继续添加hooks配置
export default defineNuxtConfig({
  // ... 其他配置

  hooks: {
    'nitro:build:before': () => {
      const fs = require('fs-extra');
      // 把ProjectA的public资源复制到ProjectB构建目录下的a-public子目录
      fs.copySync('../ProjectA/public', './.nuxt/public/a-public', { overwrite: true });
    }
  }
})

4. 资源引用示例 #

配置完成后，在ProjectB中可这样引用资源：

• Assets资源：

<template>
  <!-- 引用ProjectA的图片 -->
  <img src="@a-assets/banner.png" alt="共享横幅">
</template>

<script setup>
// 在脚本中导入资源
import icon from '@a-assets/icons/user.svg'
</script>

<style scoped>
// 引用ProjectA的样式文件
@import '@a-assets/styles/theme.css';
</style>

• Public资源：

<template>
  <!-- 通过复制后的路径访问 -->
  <img src="/a-public/logo.png" alt="共享Logo">
</template>

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