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

  • Z时代
  • 2024-02-21
  • 分类：IT

使用 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",
      },
    },
  },
},

请问这个问题该怎么解决

回答：

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

以上是 vite 打包vue3 + Element Plus + @element-plus/icons-vue？ 的全部内容， 来源链接： utcz.com/p/934531.html

回到顶部