Vue CLI project で ServiceWorker 用の独自ファイルを dist に含ませるには?

Vue CLI project で PWA を使えるようにし、ServiceWorker 用に独自ファイルを用意しましたが、yarn build 後の dist folder に独自ファイルが取り込まれません。

Nuxt では似たような PWA 用の作業で独自ファイルを取り込んでくれたので、Vue CLI project でも同じように取り込んでくれるのかと期待していましたが、そうではないようです。

Vue CLI project の build 後に ServiceWorker 用の独自ファイルを dist folder に取り込ませるには、何らかの option 設定が必要なのでしょうか?


Nuxt の場合

下図のように、
service worker 用の独自ファイル custom.2.js (1) を static folder に作成し、
nuxt.config.jsworkbox.importScripts option に上記独自ファイルを取り込むように設定。

yarn build 後、以下のように
static/sw.js (3) が生成され、
static folder 内の custom.2.js と sw.js は dist folder (4) にコピーされています。


Vue CLI の場合

src folder に service worker 用の独自ファイル (6) custom.1.js を作成。

vue.config.jspwa.workboxOptions.importScripts (7) に独自ファイルを取り込むように設定。

yarn build 後、
dist folder 内に service-worker.js が生成され、
その中で (9) importScripts に独自ファイル custom.1.js が設定されてはいても、
dist folder 内に custom.1.js ファイルはコピーされていません。

Nuxt と同様に独自ファイルはコピーされると期待していたのですが、そうではなかった。

何か設定が要るのでしょうか?

独自ファイルは public folder に置くのが正しいようです。

上図の通り、独自ファイル custom.1a.js が build 後には public から dist にコピーされていました。

  • public / custom.1a.js
  • dist / custom.1a.js