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

妖狐艹你老母 2022-10-07 12:56 726阅读 0赞

### 1、lib库模式打包vue组件 ###

**语法：**

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

**示例：**  
![在这里插入图片描述][20210618103742752.png]  
当使用一个 .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目录，如下图所示  
![在这里插入图片描述][20210618104400932.png]

### 2、组件引用 ###

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

**组件使用方式一：以script方式引入，html页面中调用HELLO组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]

**组件使用方式二：以script方式引入，vue文件中调用HELLO组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70 1]

**页面预览效果**：  
![在这里插入图片描述][2021061811034474.png]

[20210618103742752.png]: /images/20221005/d1d5e16ae62b42079135f3a9093d0888.png
[20210618104400932.png]: /images/20221005/ab8a764d96864307a199ae9cb91aff8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]: /images/20221005/798e4fbc53654a4daa741d5a68ef5dcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70 1]: /images/20221005/e6cf3e21c21c4eb18b5e009ccb820fba.png
[2021061811034474.png]: /images/20221005/ab56029f1a4c4bfbb10fcb27d9daa429.png