使用vite构建Vue3组件库，发布npm包

配置vite.config.js文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: "muk-ui", //输出文件名称
        lib: {
            entry: path.resolve(__dirname, "./src/components/muk-ui/index.js"), //指定组件编译入口文件
            name: "muk-ui",
            fileName: "muk-ui",
        }, //库编译模式配置
        rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖
            external: ["vue"],
            output: {
                // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                globals: {
                    vue: "Vue",
                },
            },
        }, // rollup打包配置
    },
});

运行打包命令

在终端使用npm run build 如下图所示出现以下文件就打包成功了

上传到npm官网

• 配置package.json 首先我们在打包好的muk-ui目录下，打开终端，然后执行npm init -y命令初始化package.json

package.json是用来配置我们上传到npm仓库的的版本号等配的

• 注册npm账号 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
• 设置npm源 在国内很多小伙伴喜欢把本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

• 登录到npm 在打包后的文件根目录打开终端，输入npm login登录到官网

完成如下图步骤就成功登陆了

• 推送到npm仓库 输入npm publish就可以正式发布到npm仓库了

注意：发布前要保证没有相同的包名，否则无法发布，每次发布的版本号必须不同

文章原文链接：vue.js - 使用vite构建Vue3组件库，发布npm包 - 个人文章 - SegmentFault 思否