vue.js - vite 打包vue3 + Element Plus + @element-plus/icons-vue？

Question

使用 vite 打包组件库，在新的项目中使用时报错
下面是打包后的产物

// dist/index.js
import  pe, { isRef as Az, } from "vue";
import  dn, { Plus as Kz } from "@element-plus/icons-vue";

pe 和 dn 找不到导致项目启动时就报错，
手动再新起一个别名时会结局此问题

import * as pe from "vue";
import  { isRef as Az, } from "vue";
import  * dn  from "@element-plus/icons-vue";
import   { Plus as Kz } from "@element-plus/icons-vue";

vite.config.ts 配置如下

build: {
  // minify:false,
  outDir: "dist",
  lib: {
    // Could also be a dictionary or array of multiple entry points
    entry: resolve(__dirname, "./src/components/index.ts"),
    name: "UI",
    // the proper extensions will be added
    fileName: "index",
    // formats: ["es"],
  },

  rollupOptions: {
    // 确保外部化处理那些你不想打包进库的依赖
    external: [
      "vue",
      "element-plus",
      "@wangeditor/editor",
      "@wangeditor/editor-for-vue",
      "@element-plus/icons-vue",
    ],
    output: {
      // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      globals: {
          vue: "Vue",
          "element-plus": "ElementPlus",
      },
    },
  },
},

请问这个问题该怎么解决

Answer 1

你打包的时候没有打包 Vue、element+ 这两个依赖，新的项目里需要手动安装或者手动引入，否则的话就会出错。