GAミント至上主義

Web Monomaniacal Developer@ビズオーシャン

Vue Cli 3への開発環境移行でつまづいたこと

yagish履歴書は2018年2月ごろから開発を始めた影響で、開発環境が古かったので現時点で最新のVue Cli 3を使った環境に変更中。
rirekisho.yagish.jp

cli.vuejs.org

導入の流れは以前の記事参照
uyamazak.hatenablog.com

つまづいて時間を無駄にした点をいくつかメモしておく。

環境変数(process.env.NAME)が読み込めない

ドキュメントをよく読めば済む話。
以前はjs形式の設定ファイルに書いていたものが、.envファイルになった。

cli.vuejs.org

で、前のから移植して

.env.development

SITE_TITLE=【開発】ブラウザでつくれる履歴書「yagish(ヤギッシュ)」

のように書いて、

process.env.SITE_TITLE

で使おうとしていたが、undefinedになっていた。
でもNODE_ENVだけはそのまま。

以下をよく読めば大丈夫だった。

Using Env Variables in Client-side Code
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:

このバージョンからは頭にVUE_APP_ がついていないと展開されないらしい。
そのため、こう↓して

VUE_APP_SITE_TITLE=【開発】ブラウザでつくれる履歴書「yagish(ヤギッシュ)」
process.env.VUE_APP_SITE_TITLE

こうすれば問題なく使えた。
下手にHOSTNAMEみたいな他でも使う名前を使っちゃうと意図しない上書きが発生するので、明示的でいいかな。

編集後のオートリロードが動かない

ブラウザで開いてコンソールを見ていると

sockjs.js?9be2:1601 GET http://172.17.0.6:8080/sockjs-node/info?t=1533004647392 0 ()

みたいなエラーが定期的に発生していた。
ホットリロード関連の通信のよう。
このIP(172.17.0.6)はyarn serveなどで開発環境を起動すると

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.17.0.6:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

と出ていた。Dockerの内部IP?で外からは繋げられないので変更したかったができなかった。
ググるとwebpack-dev-serverの設定のhostとかuseLocalIpを変えるのが出てきたけど、ここは変わらず。

試行錯誤の末、vue.config.jsのdevServer設定内のpublicで変更できた。
// vue.config.js
module.exports = {
devServer: {
public: '192.168.2.70:2104',
host: '0.0.0.0',
port: '8080'
}
}

ここで見つけた。これで6時間ぐらいハマってしまった。
https://github.com/webpack/webpack-dev-server/issues/882

使ってたライブラリが動かない

なんかよくわからないけどいろいろとエラーが出て動かない日本語関連ライブラリがあった。
最終更新が3年前なので直すのはあきらめた。

www.npmjs.com

このライブラリ名でググると最近更新されていて同じようなライブラリが見つかった。

www.npmjs.com

こっちの方が使いやすいがimportでちょっとはまった。
環境によると思うけどドキュメント通りの下記では読み込めず

import toHiragana from 'jaco/lib/toHiragana';

ファイルのパスを書いた下記なら読み込めた

import toHiragana from 'jaco/lib/fn/toHiragana';

何が原因なのかはよくわかってないけど新しくなって、使いやすくなって動いたのでよし。

あとPWA関連も大幅に変更されてるので、これから頑張る

古いバージョンのライブラリに対して新しいバージョンのドキュメントを見ながら設定をがんばってた

PWAのプラグインの設定が反映されないなぁと2時間ぐらいがんばったていたが、気づいたらインストールしてるバージョンが古く、まだ存在しないオプションを設定していた。
Vue Cli 3関連は全体的にまだ開発が進んでるけど、PWAのは特にまだbetaだったので気を付けるべきだった。
package.jsonも頻繁にメンテしていった方がよさそう。

インストールしてたやつ(iconPathsがない)
www.npmjs.com

現時点の最新版
www.npmjs.com