vue-cli3发布npm包

configureWebpack: { // webpack 设置,可覆盖默认配置
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      // publicPath: '/dist/',
      filename: 'zhuqingPlugins.js',
      library: 'zhuqing-plugins', // library指定的就是你使用require时的模块名，这里便是require("toastPanel")
      libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
      umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
    },
  },

在vue.config.js中加入如下配置，其中publicPath要注释掉，否则报错

发布组件时候临时指定地址

npm publish --registry http://registry.npmjs.org/

发布报错

npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.

解决办法很简单，按照提示删除package.json中的private字段，或将其设置为false都可以。

发布没有权限，windows下找到cmd命令，右键--管理员身份运行，然后cd进项目目录（切盘符用 X:  这和linux不太一样）

 

发布文件的入口为package.json文件中的main配置

要发布dist ，在gitignore中将dist去掉

 

vue-cli 3.x 提供了一个库文件打包命令

主要需要四个参数：

1. target: 默认为构建应用，改为 lib 即可启用构建库模式

2. name: 输出文件名

3. dest: 输出目录，默认为 dist，这里我们改为 lib

4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

基于此，在package.json 里的 scripts 添加一个 lib 命令

"scripts": { 
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js" 
}

 

 

然后执行 npm run lib 命令，编译组件

 

六、准备发布

首先需要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：作者；

private：是否私有，需要修改为 false 才能发布到 npm；

license：开源协议。