一、前言本文主要介绍如何把一个vue组件通过vite编译发布到NPM平台。二、准备工作vue版本^3.3.11node版本v20.11.0npm版本v10.2.4一个NPM平台账号三、思路1、编写Vue组件2、把Vue组件提成一个插件3、编写编包脚本4、进行NPM发布四、实现1、编写Vue组件template button classbtn{{name}}/button /template style scoped .btn { color: blue } /style script langts export default { name: CunstomButton, props: [text], data() { return {} }, mounted() {} } /script注此时的组件文件还在src文件里。2、把Vue组件提成一个插件把组件提到src平级的文件夹中packages中并且创建一个index.ts文件通过index.ts 统一管理发布的组件编写index.ts把组件改写成插件的导入方式方法一import CunstomButton from ./components/CunstomButton.vue; // 把需要导出的组件统一提到这个公共文件在项目的main.ts中导入 const components [CunstomButton]; export default (app: any) { components.forEach(component { app.component(component.name, component); }); }方法二// 通过index.ts 统一管理发布的组件 import CunstomButton from ./components/CunstomButton.vue; const myPlugin { install: (app: any){ app.component(CunstomButton, CunstomButton); } } export default myPlugin;3、编写编包脚本与src平级创建一个build文件夹增加一个lib.config.tsimport { defineConfig } from vite; import {resolve} from path; import vue from vitejs/plugin-vue export default defineConfig({ build: { outDir: dist, lib: { entry: resolve(__dirname, ../packages/index.ts), name: large-screen-dashboard, //对外暴露的组件名称 fileName: (format) large-screen-dashboard-${format}.js //umdrequire导入方式 es(import导入方式) }, rollupOptions: { // 不进行打包的组件 external: [vue], output: { //针对于umd模式下为外部化依赖提供一个全局的变量 globals: { vue: Vue //对应exter里的vue 对于UMD模式导入后可以使用Vue.xxx } } }, }, // 插件:需要把哪些文件打包成一个库文件 plugins: [vue({ // 包括哪些文件 include: [/\.vue$/] })] })在package.json中增加编译命令scripts:{ ... build:component: vite build --config ./build/lib.config.ts ... }4、进行NPM发布1、npm发布命令行命令描述npm login登录npmnpm beta (npm publish --tag beta)发布测试版本 beta需要在package.json中的version增加后缀-beta,eg:.0.0.0-betanpm stage publish发布正式版本至缓存区npm需要11.15.0或者node在 22.14.0的LTS版本npm unpublish --force撤销发布的包npm deprecate preject message增加包的警告信息,当发布的包不能使用,可以在message中说明用户安装时可以显示npm version使用npm 自动跟踪版本号,不需要发布前手动修改package.json中的版本号第一位-major: 主版本号的更新 //1.0.3npm version major第二位-minor: 次版本号的更新 //0.1.3npm version minor第三位-patch: 补丁号 // 0.0.4npm version patch第四位-premajor: 预发布版本号 // 1.0.4-0 npm version premajornpm version preminornpm version prepatchnpm version prerelease2、npm发布新流程2026-9更新npm stage publish ← Stage-only token 可以执行 │ ▼ ┌──────────────┐ │ 暂存区 │ 包已上传但用户还看不到 └──────────────┘ │ ▼ 维护者手动 promote ← 需要 2FA 验证人工操作 │ ▼ 正式发布到 npm registry ← 用户此时才能安装3、遇见的问题记录问题描述原因解决方法npm publish时报错This package has been marked as private认为项目是私有的package.json中private修改为truenpm pubilsh时报错403 Forbidden - PUT https://registry.npmjs.org/large-screen - You do not have permission to publish large-screen. Are you logged in as the correct user?package.json中的name已经存在NPM平台存在package.json中name修改另一个名字发布之后在项目中无法使用没有在package.json中配置组件入口文件(js/css)package.json中增加编译后的文件引入main:dist/large-screen-dashboard-es.jsstyle: dist/style.css,发布时,把src等文件都发布了期望只发布编译后的dist文件夹中的内容未在package.json中配置files属性在package.json中增加files: [dist]npm 账号启用了双重验证2FA但发布时没有提供 OTP 验证码生成一个“可绕过2FA”的访问令牌适用于CI/CD或频繁发布操作步骤1、登录npm官网2、点击头像--选择Access Tokens3、点击 Generate New Token4、进行配置【1】勾选Bypass 2FA for publishing【2】Permissions选择read and write(stage only)5、复制生成的token6、在本机的.npmrc文件中增加//registry.npmjs.org/:_authToken生成的token
