vite打包老是生成plugin-vue-export-helper.js文件

Question

vite打包老是生成plugin-vue_export-helper-hUChTQA_.js文件

场景：我想用vite做一个开发ui库的框架（monorepo模式），于是我创建了两个示例组件button和input组件，但是打包完成后生成了plugin-vue_export-helper-hUChTQA_.js这个js，而且两个组件都引入了他。这样带来一个麻烦就是，如果把button和input单独作为npm包发布，这样是必会造成plugin-vue_export-helper-hUChTQA_.js找不到。请问怎么解决这个问题

vite配置如下

import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)
const rollupConfig = require('./entry.cjs')

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const entry = {}
rollupConfig.map(item => item.input).map(item => {
  const key = Object.keys(item)[0]
  entry[key+'/lib/index'] = item[key]
})

export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    rollupOptions: {
      external: ['vue'],
      preserveModules: false,
      output: {
        strict: false,
        manualChunks: {},
        experimentalMinChunkSize: 5 * 1024 * 1024
      }
    },
    lib: {
      entry: entry,
      formats: ['es'],
      fileName: (format, entryName) => `${entryName}.js`
    },
    outDir: 'dist2'
  },
})

求详细解释问题所在

Answer 1

引自微信小程序：皆我百晓生。

对于一些比较特殊的需求，可能需要使用自定义的Vite配置文件来解决问题。使用自定义配置文件的方式可以更灵活地控制Vite的行为。

以下是一个示例的自定义Vite配置文件的编写方式：

1.在你的项目根目录下创建vite.config.js文件。

2.在vite.config.js文件中，使用CommonJS的方式导入@vitejs/plugin-vue插件和其他所需的依赖。

const vue = require('@vitejs/plugin-vue');

3.导出一个配置对象，并配置Vite的各个选项和插件。

module.exports = {
  plugins: [
    vue(),
  ],
  build: {
    // 配置其他构建选项...
  },
};

4.在package.json文件中，配置vite命令使用自定义的配置文件。

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "dev": "vite --config vite.config.js"
  }
}

通过使用自定义的Vite配置文件，你可以更加细粒度地控制Vite的行为。在配置文件中，可以根据具体需求对插件、构建选项等进行自定义配置，以解决你遇到的问题。