Vue cli3库模式搭建组件库并发布到npm，未进行编译导致安装出现兼容性问题

一、目录

example目录原src，用作示例展示
package目录封装组件

二、修改vue.config.js，可自己创建一个vue.config.js

修改入口文件为example
添加webpack对package目录的处理

module.exports = {
  pages: {
    index: {
      entry: 'example/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(__dirname + 'package')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
  }
}

三、在package目录下编写组件，index.js提供对外使用

index.js文件如下

   import Invoice from './invoice'
	// 存储组件列表
	var components = [
	Invoice
	]
	var install = function(Vue) {
	if(install.installed) return
	components.map(component => Vue.component(component.name, component))
	}
	// 判断是否是直接引入文件
	if(typeof window !== 'undefined' && window.Vue) {
	install(window.Vue)
	}
	export default {
	install,
	Invoice
	}

四、在main.js引入组件，在example中使用组件本地运行查看效果

五、发布npm

1.package.json配置
postlib，在执行npm run lib后会自动执行npm run compile命令去babel编译

      "name": "xbwinvoice",
	  "version": "0.7.57",
	  "description": "电子发票版式",
	  "main": "lib/xbwinvoice.umd.min.js",
	  "keyword": "xbwinvoice",
	  "private": false,
	  "scripts": {
	    "compile": "babel lib/ --out-dir lib/",
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "serve": "vue-cli-service serve",
	    "build": "vue-cli-service build",
	    "dev": "vue-cli-service serve",
	    "postlib": "npm run compile",
	    "lib": "vue-cli-service build --target lib --name xbwinvoice --dest lib package/index.js"
	  }

2.执行npm run lib
3.切换npm源，npm login登录，执行npm publish发布
4.发布成功后，可以npm install 组件，main.js中引入使用

六、更新组件包

1.执行npm run lib
2.更改package.json中的version版本号
3.切换npm源，npm login登录，执行npm publish