vue3 vite 组件发布为npm包

通过vite将vue3组件发布为npm只需简单的进行一些配置即可

编写入口文件, 分别实现按序引入和批量引入

// src/index.js

import YourComponent from "path/to/your/component.vue";

export { YourComponent}; //实现按需引入

const components = [YourComponent];

const install = function (App, options) {
  components.forEach((component) => {
    App.component(component.name, component);
  });
};

export default { install }; // 实现批量引入

编辑vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    emptyOutDir: false, // 避免dist被清空
    lib: {
      entry: "./src/index.js",
      name: "your package name",
    },
    rollupOptions: {
      // 把不想打包进你的包的包排除掉
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

编辑package.json

{
  "name": "project-name",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "files": [
    "dist"
  ],
  "main": "./dist/hello-npm.umd.js",
  "module": "./dist/hello-npm.es.js",
  "exports": {
    ".": {
      "import": "./dist/test-btn.es.js",
      "require": "./dist/test-btn.umd.js"
    }
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

做完以上步骤后 npm run build 即可生成你的包, 然后根据npm包发布流程 - 掘金 (juejin.cn)发布就好.