Vite无法构建node_modules中的.graphql文件问题求助

问题原因 #

Vite出于性能优化，默认会跳过node_modules目录下文件的插件转换流程。你配置的@rollup/plugin-graphql只处理了项目本地的.graphql文件，而没有覆盖到node_modules里的自定义包。用yarn link关联后，包被识别为本地源码，不在Vite默认的忽略范围内，所以能正常处理。

解决方案 #

方案1：扩展@rollup/plugin-graphql的处理范围

修改Vite配置，给Graphql插件添加include选项，明确指定要处理目标自定义包内的.graphql文件：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue2';
import Graphql from '@rollup/plugin-graphql';

export default defineConfig({
    server: {
        port: 8011,
    },
    plugins: [
        Graphql({
          // 替换为你的自定义包实际路径，支持glob匹配
          include: ['**/*.graphql', 'node_modules/your-custom-package/**/*.graphql']
        }),
        Vue(),
    ],
});

将your-custom-package替换为你自定义包的真实名称，确保插件能捕获到该包内的所有.graphql文件。

方案2：排除目标包的预构建

Vite会对node_modules内的依赖进行预构建，预构建阶段可能未应用@rollup/plugin-graphql。通过optimizeDeps.exclude让目标包跳过预构建，强制走插件处理流程：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue2';
import Graphql from '@rollup/plugin-graphql';

export default defineConfig({
    server: {
        port: 8011,
    },
    optimizeDeps: {
      exclude: ['your-custom-package'] // 替换为自定义包名
    },
    plugins: [
        Graphql(),
        Vue(),
    ],
});

注意：该方案可能导致依赖加载性能下降，仅当方案1无法生效时使用。

方案3：优化自定义包（长期推荐）

既然是你维护的自定义包，最彻底的解决方式是在包发布前完成编译：

• 用Rollup或Vue CLI打包自定义包，将.vue文件编译为可直接运行的JS代码
• 将.graphql文件转换为JS模块（比如用@rollup/plugin-graphql在包的构建流程中处理）
  这样无论在Vue CLI还是Vite项目中使用，都不需要额外配置插件处理未编译文件。

验证 #

修改配置后，重启Vite开发服务或重新执行构建命令，即可验证错误是否消失。

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