使用lib库模式打包vue组件及组件引用

1、lib库模式打包vue组件

语法：

vue-cli-service build --target lib --name libName [entry]

示例：

当使用一个 .js 或 .ts 文件作为入口时，它可能包含具名导出，所以库会暴露为一个模块，即我们的组件库需通过 window.libName.default 访问。如果希望直接暴露默认导出，可以修改 vue.config.js 中的webpack 配置。

vue.config.js中的webpack配置修改：

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

打包vue组件：

npm run lib

执行打包命令后，可看到项目根目录下生成了含有vue组件文件的lib目录，如下图所示

2、组件引用

lib库模式打包的vue组件中不包含Vue代码，需单独引入。

组件使用方式一：以script方式引入，html页面中调用HELLO组件

组件使用方式二：以script方式引入，vue文件中调用HELLO组件

页面预览效果：