vite.js+vue3+element-plus打包报错(Note that you need plugins to import files that are not JavaScript)

javascript 项目 vite.js vue3 element-plus 打包 报错 (Note that you need plugins to import files that are not JavaScript) /node_modules/element-plus/es/components/steps/src/item.mjs

这个问题真的被卡了好几天 。直接上解决方案

修改 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    // 解决 Element Plus 打包问题
    commonjsOptions: {
      include: [/node_modules/],
    },
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus'],
        },
      },
    },
  },
  optimizeDeps: {
    include: ['element-plus/es/components/steps/src/item.mjs'],
  },
})

修改 package.json 中的构建脚本

{
  "scripts": {
    "build": "vite build --emptyOutDir",
    "electron:build": "vite build --emptyOutDir && electron-builder"
  }
}

解决方案说明

1. 添加了 optimizeDeps.include 配置，明确包含了报错的 Element Plus 组件文件
2. 添加了 build.commonjsOptions 配置，确保正确处理 node_modules 中的文件
3. 使用 build.rollupOptions.output.manualChunks 将 Element Plus 单独打包，减少构建问题
4. 确保使用了 AutoImport 和 Components 插件来自动导入 Element Plus 组件
这些修改应该能解决你遇到的 Element Plus 组件打包错误问题。如果问题仍然存在，可能需要检查项目中是否有其他特殊的导入方式或配置冲突。

关于依赖版本参考

// package.json  
{  
  "dependencies": {  
    "element-plus": "^2.4.4",  
    "vite": "^5.0.0"  
  },  
  "devDependencies": {  
    "sass": "^1.69.0",  
    "unplugin-vue-components": "^0.26.0"  
  }  
}  

创作不易，如果解决了您的问题请帮忙点赞收藏关注，感谢！！！

如上述，有不足之处请各位同学指点。