Vue 组件封装发布 npm 包（2023/03/17）

文章目录

• Vue 组件封装发布 npm 包（2023/03/17）
• • 1. 前提条件
  • 2. 准备项目
  • • 2.1 创建 Vue 项目
    • 2.2 编写组件
    • 2.3 测试组件
    • 2.4 编写打包入口文件
    • 2.5 编写 Readme
  • 3. 打包发布
  • • 3.1 非编译方式（推荐）
    • 3.2 编译方式
  • 4. 测试使用

项目中经常遇到需要组件复用的情况，本文将介绍如何将 Vue 组件封装成 npm 包，并上传到 npm 私有仓库（本文不介绍 npm 私有仓库的搭建，请自行查阅相关资料）。

1. 前提条件

• npm 私有仓库；
• nodejs；
• Vue；

2. 准备项目

2.1 创建 Vue 项目

1. 通过 vue-cli 创建并初始化 vue2 项目；

   $ vue create app
   

2. 创建src/packages目录用来存放组件，项目整体目录结构如下；

   app
   ├── README.md
   ├── babel.config.js
   ├── jsconfig.json
   ├── node_modules
   ├── package-lock.json
   ├── package.json
   ├── public
   │   ├── favicon.ico
   │   └── index.html
   ├── src
   │   ├── App.vue
   │   ├── assets
   │   ├── components
   │   ├── packages
   │   └── main.js
   └── vue.config.js
   

2.2 编写组件

此处以简单的 HelloVue 组件为例，新建src/packages/hello-vue/index.vue文件，内容如下：

2.3 测试组件

在src/App.vue中引入HelloVue组件测试能否正常使用，内容如下：

2.4 编写打包入口文件

测试通过后，编写打包入口 js 文件，创建src/index.js文件，内容如下：

import HelloVue from "@/packages/hello-vue/index.vue";// 需要打包导出的组件
const components = [HelloVue
];const install = function (Vue) {components.map(component => {Vue.component(component.name, component);});
}if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {name: "HelloVue",version: "1.0.0",install
};

2.5 编写 Readme

编写Readme.md文件内容，如插件使用方式等等。

3. 打包发布

3.1 非编译方式（推荐）

使用非编译的方式可以解决src/assets文件夹下静态文件依赖的问题，但无法解决public目录静态文件依赖问题（目前还没找到较好的解决办法）。

1. 修改package.json文件，修改内容如下：

   {"name": "@zhy/app", // 包名"version": "0.1.0", // 版本号，后续每次更新发布都要修改"private": false, // 必须修改为 false"description": "Hello Vue!", // 包描述"main": "./src/index.js" // 包入口文件
   }
   

2. 添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

   node_modules/public/src/components
   src/App.vue
   src/main.js.gitignorebabel.config.js
   jsconfig.json
   package-lock.json
   vue.config.js.idea
   

3. 登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

   # 根据提示输入用户名密码登录
   $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
   

4. 发布到私有仓库；

   # 发布
   $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/# 从私有仓库删除（谨慎操作）
   $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
   

3.2 编译方式

编译的方式可以对代码进行编译压缩，隐藏源码，但无法解决静态文件依赖的问题。

1. 修改package.json文件，修改内容如下：

   {"name": "@zhy/app", // 包名"version": "0.1.0", // 版本号，后续每次更新发布都要修改"private": false, // 必须修改为 false"description": "Hello Vue!", // 包描述"main": "./app/app.umd.js", // 包入口文件，对应打包后的目录"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint",// 新增打包脚本，--name 打包后的名字，--dest 打包后的目录"package": "vue-cli-service build --target lib src/index.js --name app --dest app"}
   }
   

2. 打包编译；

   # 成功后生成打包目录 app
   $ npm run package
   

3. 添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

   node_modules/public/
   src/.gitignore
   .npmignorebabel.config.js
   jsconfig.json
   package-lock.json
   vue.config.js.idea
   

4. 登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

   # 根据提示输入用户名密码登录
   $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
   

5. 发布到私有仓库；

   # 发布
   $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/# 从私有仓库删除（谨慎操作）
   $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
   

4. 测试使用

1. 创建并初始化 Vue 项目；

   $ vue create test-app
   

2. 安装依赖；

   $ npm install @zhy/app --registry http://172.20.2.5:8081/repository/npm-hosted/
   

3. 在src/main.js文件中注册插件;

   import HelloVue from '@zhy/app';Vue.use(HelloVue);
   

4. 在App.vue中使用插件；

参考资料:

• Vue封装组件并发布到npm仓库 - 掘金 (juejin.cn)
• 封装Vue组件并发布到npm（完美解决组件中的静态文件引用） - 浅笑· - 博客园 (cnblogs.com)
• Vue封装组件并发布到npm仓库-阿里云开发者社区 (aliyun.com)