Vite库模式打包后入口文件路径不对怎么办？

Prog.铭轩提问于 2026-02-19 18:38:24 阅读 4

前端

我在用Vite的库模式打包组件库时遇到了问题，配置了build.lib.name为”my-lib”，但生成的dist文件夹里只有vendor.js，没有预期的main.js入口文件。查看构建日志没报错，这是为什么呢？

尝试在vite.config.js里这样配置：


export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'MyLib',
      fileName: (format) => <code>my-lib.${format}.js</code>
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'auto',
        globals: { vue: 'Vue' }
      }
    }
  }
})

但打包后文件结构是这样的：


dist/
  my-lib.es.js
  my-lib.cjs.js
  my-lib.umd.js
  vendor.js

明明指定了entry路径，为什么没有生成对应的main.js？umd格式文件能否直接引入使用？

构建工具

我来解答赞 2 收藏

反馈

1 条解答

IT人玉银 Lv1

你这个问题其实不用太纠结，Vite库模式下生成的文件名是根据 fileName 配置来的，既然你写了 my-lib.${format}.js，那自然不会有单独的 main.js。最简单的办法是直接在 package.json 里指定入口文件，比如这样：

{

  "main": "./dist/my-lib.umd.js",

  "module": "./dist/my-lib.es.js",

  "exports": {

    ".": {

      "import": "./dist/my-lib.es.js",

      "require": "./dist/my-lib.cjs.js"

    }

  }

}

至于 umd 格式，是可以直接通过 <script> 标签引入使用的，记得配置好全局变量名 MyLib 就行了。别折腾太多，按这个改完基本就能用了。

2026-02-19 19:00