既存のVue CLI 3のプロジェクトをCLI 4にアップグレードした方法とハマりどころ
やりたいこと
Vue CLI 3 (@vue/cli)で作成したプロジェクトのプラグインとかを@vue/cli@4系にアップグレードしたい。 やりかた
ずっと2系が使われていたcore-jsがこのアップデートをすると3系になってくれる。 code:bash
# Vue CLIを4にアップデート
$ npm i -g @vue/cli
# @vue/cli 4.0.3に上がった
# 既存のプロジェクトに移動してアップグレード
$ cd プロジェクト
$ vue upgrade
最初にターミナル上に以下のようにアップグレードの候補が出てYes/Noを聞かれるのでYesで進めば自動的に適切に書き換えてくれる。
以下は出力。
code:vue upgradeの出力
WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
✔ Gathering package information...
Name Installed Wanted Latest Command to upgrade
@vue/cli-service 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-service
@vue/cli-plugin-babel 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-plugin-babel
@vue/cli-plugin-eslint 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-plugin-eslint
@vue/cli-plugin-pwa 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-plugin-pwa
@vue/cli-plugin-typescript 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-plugin-typescript
@vue/cli-plugin-unit-mocha 3.11.0 3.12.0 4.0.3 vue upgrade @vue/cli-plugin-unit-mocha
vue-cli-plugin-vuetify 0.6.3 1.0.2 1.0.2 vue upgrade vue-cli-plugin-vuetify
? Continue to upgrade these plugins? Yes
Upgrading @vue/cli-service from 3.11.0 to 4.0.3
added 13 packages, updated 1 package and audited 46807 packages in 12.892s
found 0 vulnerabilities
✔ Successfully invoked migrator for plugin: @vue/cli-plugin-babel
The following files have been updated / added:
vue-cli/
babel.config.js
package-lock.json
package.json
You should review these changes with git diff and commit them.
babel core-js has been upgraded from v2 to v3.
If you have any custom polyfills defined in babel.config.js, please be aware their names may have been changed.
Upgrading @vue/cli-plugin-eslint from 3.12.0 to 4.0.3
+ @vue/cli-plugin-eslint@4.0.3
added 2 packages from 1 contributor, removed 45 packages, updated 1 package and audited 46508 packages in 7.933s
found 0 vulnerabilities
🚀 Running migrator of @vue/cli-plugin-eslint
✔ Successfully invoked migrator for plugin: @vue/cli-plugin-eslint
The following files have been updated / added:
vue-cli/
babel.config.js
package-lock.json
package.json
You should review these changes with git diff and commit them.
Upgrading @vue/cli-plugin-pwa from 3.12.0 to 4.0.3
+ @vue/cli-plugin-pwa@4.0.3
added 5 packages from 2 contributors, removed 6 packages, updated 15 packages and audited 46508 packages in 9.635s
found 0 vulnerabilities
Upgrading @vue/cli-plugin-typescript from 3.12.0 to 4.0.3
+ @vue/cli-plugin-typescript@4.0.3
added 10 packages from 20 contributors, updated 4 packages and audited 45602 packages in 6.814s
found 0 vulnerabilities
Upgrading @vue/cli-plugin-unit-mocha from 3.12.0 to 4.0.3
+ @vue/cli-plugin-unit-mocha@4.0.3
added 48 packages from 41 contributors, removed 10 packages, updated 13 packages and audited 43620 packages in 20.942s
found 0 vulnerabilities
Upgrading vue-cli-plugin-vuetify from 1.0.1 to 1.0.2
+ vue-cli-plugin-vuetify@1.0.2
added 1 package, updated 1 package and audited 43621 packages in 10.56s
found 0 vulnerabilities
変更れるファイル
以下のファイルが変更されるみたい。
vue-cli/
babel.config.js
package-lock.json
package.json
vue upgradeでの実際の変更は以下のようになった。
（オプションで変えられそうだけど）
内部のWorkboxアップデートされるみたい
PWAでWorkboxを使っていてService Workerを自分でカスタマイズしている場合と「Uncaught TypeError: workbox.clientsClaim is not a function」というエラーが出た。これに関して。 https://gyazo.com/d7937d60039b1a939c7678e122fef5b6
workbox.clientsClaim();はworkbox.core.clientsClaim();変更になったみたい。
workbox.precaching.suppressWarnings()は削除されたみたい。
CSSのソースマップ
追記: 別プロジェクトで3系から4.1.1にあげた時はこの現象は発生しなかった。
どこかのタイミングでこれが問題になり修正されたのかもしれない。
CSSのソースマップがすべて404で怒られている。原因はcss.mapがビルド時生成されないから。ビルド時に生成されないのに自動生成されるprecache-manifest......jsには.css.mapが記述されている。 https://gyazo.com/879cfc94af4556a4ed44a8baa2bf73ea
これを解消するために、CSSのソースマップの生成をオプションで有効にした。
.css.mapをキャッシュのリストからexcludeすることで対処しても良いと思う。
Netlifyでリダイレクト設定を記述するファイルを/public/_redirectsにおいていて、これはNetlifyがビルド後に削除するかアクセスできないようにさせるため、Workboxのキャッシュの候補に入ってしまっていることでエラーするようになった様子。今まで(Vue CLI 3)ではこのエラーは出ていなかった。 https://gyazo.com/d220312c71993f465526913f1deb1d7d
この変更（）で_redirectsをキャッシュから除外するように設定を書いて対処。