Vue CLIでVue.jsプロジェクトをライブラリにビルドする

Vue CLI 3のvue-cli-service buildにtargetオプション（ビルドターゲット）を指定することで、Vueプロジェクトをライブラリ形式にビルドできる。指定できるtargetオプションは以下の通り。

• App

  • コマンド：vue-cli-service build (--target app)
  • デフォルトのビルドターゲット
  • 依存ライブラリをリンクしたindex.htmlが生成される。
  • publicディレクトリの静的コンテンツもコピーされる。

• Library

  • コマンド：vue-cli-service build --target lib [name] [entry]
  • [entry]に指定したVueコンポーネントもしくはjsファイルをエントリーポイントとして、CommonJSとUMD形式で出力される。
  • Vueはバンドルされず、静的コンテンツもコピーされない。
  • 使用例

  <script src="https://.../vue.js"></script>
  <script src="https://.../myLib.js"></script>
  <link rel="stylesheet" href="./myLib.css">
  
  <div id="app">
    <my-lib></my-lib>
  </div>
  
  <script>
  new Vue({
    components: {
      'my-lib': myLib
    }
  }).$mount('#app')
  </script>
  

  • IEをサポートするには、current-script-polyfillを読み込む必要がある。

• Web Component

  • コマンド：vue-cli-service build --target wc [name] [entry]
  • [entry]に指定したVueコンポーネントをエントリーポイントとして、Web Componentとして出力される。
  • Vueはバンドルされず、静的コンテンツもコピーされない。
  • 使用例

  <script src="https://.../vue.js"></script>
  <script src="https://.../my-wc.js"></script>
  
  <my-wc></my-wc>
  

  • IE 11以下はサポートされない。

おまけ：package.jsonへのビルドコマンド追加

Vue CLIで作成したプロジェクトであればpackage.jsonにビルドコマンドが記載されているため、ライブラリ用のビルドコマンドもそこに追加してしまうのがよい。

package.json記述例

{
  "scripts": {
    "build:lib": "vue-cli-service build --target lib myLib",