Vue 2.7+Vite+Vue Router报错：模块未提供default导出，如何改vite.config.js？

云原生阿岚

2026-8-16

解决Vue Router v3在Vite中"未提供default导出"的问题

Vue Router v3.x基于CommonJS规范导出，Vite的依赖预构建默认逻辑无法自动将其转换为ES模块的默认导出格式，这就是你遇到报错的核心原因。以下是两种可行的vite.config.js修改方案：

方案一：通过ESBuild插件适配导出格式

在optimizeDeps.esbuildOptions中添加自定义插件，手动为vue-router补充默认导出：

import vue from "@vitejs/plugin-vue2";
import { defineConfig } from "vite";

const isProd = process.env.NODE_ENV === "production";

export default defineConfig({
  build: {
    minify: isProd
  },
  optimizeDeps: {
    include: ["vue-router"],
    esbuildOptions: {
      plugins: [
        {
          name: "fix-vue-router-cjs",
          setup(build) {
            // 定位vue-router的主文件
            build.onResolve({ filter: /^vue-router$/ }, args => ({
              path: require.resolve("vue-router")
            }));
            // 为CommonJS模块补充默认导出
            build.onLoad({ filter: /vue-router\.js$/ }, async args => {
              const fs = require("fs");
              const content = fs.readFileSync(args.path, "utf8");
              return {
                contents: `${content}\nmodule.exports = module.exports.default || module.exports;`,
                loader: "js"
              };
            });
          }
        }
      ]
    }
  },
  plugins: [vue()]
});

方案二：直接指定ES模块入口

vue-router v3的npm包内置了ES模块版本，通过别名直接指向该文件，绕开CommonJS转换问题：

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

const isProd = process.env.NODE_ENV === "production";

export default defineConfig({
  build: {
    minify: isProd
  },
  resolve: {
    alias: {
      "vue-router": path.resolve(__dirname, "node_modules/vue-router/dist/vue-router.esm.js")
    }
  },
  optimizeDeps: {
    include: ["vue-router"]
  },
  plugins: [vue()]
});