Vue Cli 3打包组件发布到npm

在开发过程中，有一个组件是需要在多个系统复用，

于是就计划打包成一个组件，使用npm包的方法下载在不同的系统中引入

 

 1、新建项目

使用vue create project-name 创建一个名为ProjectName的项目

创建后项目结构目录如图所示

 

使用脚手架自带的工具打包后的项目目录

 

 

下面就根据自己项目的需要进行调整，我把src文件夹名字修改为packages

那么入口文件的位置也得进行修改，在项目根目录新建vue.config.js文件

修改vue.config.js的内容

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'packages/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

 

2、编写并注册对应组件

在packages文件夹下新建components表示我们需要构建成库的组件

我把组件命名为StoreModal，为了方便多个组件管理，我命名一个StoreModal文件夹存放

 

 

 在storeModal文件夹新建index.js，内容为

import main from "./main";

main.install = (Vue) =>{
  Vue.component(main.name,main)
}

export default main

index.js的内容代表着我们将其注册为一个组件供给Vue使用

注册的名字则为我们在组件中的name

** 以上仅为单文件打包入口**

3、修改packaegs.json

在packages.json中添加脚本命令

  "lib": "vue-cli-service build --target lib --name StoreSelectModal packages/components/storeModal/index.js"
  

在vue.config.js添加以下代码，目的是扩展设置webpack的配置，使packages加入打包编译过程

修改后的vue.config.js内容如下

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "packages/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html"
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule("js")
      .include.add("/packages/")
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap(options => {
        // 修改它的选项...
        return options;
      });
  },
  parallel: false,
  // 关闭打包生成的map文件
  productionSourceMap: false,
  // 强制CSS内联
  css: {
    extract: false
  }
};

运行改行脚本命令：npm run lib。此时dist目录输出为

 

 

与我们使用普通build结构不一样