Vite构建报错：Rollup无法解析外部目录导入，如何配置rollupOptions？

项目结构 #

my-app/
├─ client/
│  ├─ src/
│  │  ├─ views/
│  │  │  ├─ *.vue
│  │  ├─ router/
│  │  │  ├─ router.js
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ vite.config.js
├─ specific/
│  ├─ views/
│  │  ├─ test.vue

问题场景与报错 #

• 在router.js中通过动态导入加载外部目录组件：

  component: () => import("@specific/views/test.vue")
  

• 执行构建时触发报错：

  [vite]: Rollup failed to resolve import "vue-router" from "../specific/views/test.vue".
  

• 尝试将@specific/views/*.vue加入rollupOptions.external后，构建成功但输出目录中无test.vue对应的打包资源。

当前vite.config.js配置 #

import { defineConfig, loadEnv } from "vite";

import vue from "@vitejs/plugin-vue";

export default ({ mode }) => {
const env = loadEnv(mode, process.cwd());

    const commonPath = env.VITE_COMMON_PATH ?? "/usr/local/my-app";
    const specificPath = env.VITE_SPECIFIC_PATH ?? "/usr/local/my-app/specific";
    const outDir = env.VITE_OUTDIR ?? "/var/www/";
    
    return defineConfig({
        build: {
            outDir: `${outDir}/site/`,
            sourcemap: false,
        },
        publicDir: false,
        resolve: {
            alias: [
                { find: "vue", replacement: "vue/dist/vue.runtime.esm-bundler.js" },
                { find: "@", replacement: `${commonPath}/client/src` },
                { find: "@node_modules", replacement: `${commonPath}/client/node_modules` },
                { find: "@specific", replacement: specificPath },
            ],
            preserveSymlinks: true,
        },
    });

};

解决方案 #

问题根源 #

specific目录不在Vite默认的项目根目录（client/）范围内，导致该目录下的.vue文件无法正确解析client/node_modules中的依赖；而将其加入external会直接排除打包，因此输出目录无对应资源。

修改vite.config.js配置 #

调整build.rollupOptions和resolve配置，让Vite将外部目录的组件纳入打包流程，并正确解析依赖：

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  const commonPath = env.VITE_COMMON_PATH ?? "/usr/local/my-app";
  const specificPath = env.VITE_SPECIFIC_PATH ?? "/usr/local/my-app/specific";
  const outDir = env.VITE_OUTDIR ?? "/var/www/";
  
  return defineConfig({
    plugins: [vue()], // 确保vue插件加载，处理所有.vue文件
    build: {
      outDir: `${outDir}/site/`,
      sourcemap: false,
      rollupOptions: {
        // 指定主入口，确保动态导入的组件被Rollup扫描到
        input: path.resolve(commonPath, "client/src/main.js"),
        // 不需要将@specific的文件加入external
        external: [],
      },
    },
    publicDir: false,
    resolve: {
      alias: [
        { find: "vue", replacement: "vue/dist/vue.runtime.esm-bundler.js" },
        { find: "@", replacement: `${commonPath}/client/src` },
        { find: "@specific", replacement: specificPath },
        // 移除@node_modules别名，Vite会自动从项目根目录的node_modules解析依赖
        // { find: "@node_modules", replacement: `${commonPath}/client/node_modules` },
      ],
      preserveSymlinks: true,
      // 显式添加.vue扩展名，确保外部目录的vue文件被正确解析
      extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx'],
    },
  });
};

关键调整点说明 #

1. 移除@node_modules别名：Vite默认会从项目根目录（client/）的node_modules解析依赖，手动指定反而会干扰正常解析逻辑。
2. 添加resolve.extensions：显式声明.vue扩展名，避免外部目录的vue文件解析时出现扩展名匹配问题。
3. rollupOptions.input指定主入口：确保Rollup能扫描到主入口中的动态导入，将test.vue纳入打包流程。
4. 清空external配置：不要将@specific下的文件排除，让Vite正常打包这些组件。

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