Vue.jsで作成している画面をWEB上で表示させるまでに、エラーが発生したので備忘録を。
npmをよくわかっていないまま、エラーに遭遇し、いろいろと試して、失敗した経緯を残します。
いろいろ試したので、この中のどれかに当てはまる人は結構いるのではないかと・・・
##起こったこと
コードを渡されたので適当な配下において、該当のフォルダに移動後、npm install→npm run serveで開くはずといわれ、そのとおりにするも開かない。
WEB画面でhttp://localhost:8080にアクセスするも、「Module not found: Error: Can't resolve～」という文字が表示され、ファイルがないから表示できないよ！と注意された。
##その1: webpack-dev-server.jsに目をつける
まずは、画面に表示されてるままにググると、どうやら、webpack-dev-server.jsファイルで書き換えが必要らしいとの情報を見つけ、言われるがまま書き換えてみる。
[【Webpackを使う時は、resolve.modulesの設定に気を付けよう。(特にModule not found: Error: Can't resolve～が表示された時)】]
(https://qiita.com/toris-birds/items/c0874a66865f7e3a09ee)
・・・が、なにも変わらない。
エラー表示も変わらないし、なんなら修正したコードがあっているのかも若干怪しかったが、効果なしと判断。
##その2: webpack.config.jsに目をつける
次に、それっぽい記事2つめの対応を行う。
[【Module not found: Error: Can't resolve '〇〇'と表示された場合の解決策】]
(https://qiita.com/Dragon-taro/items/73fae72c037363b9f2b0)
・・・も、そもそもwebpack.config.jsの中にmodule.exportsと書かれている文言がないな～と思ってみているとそもそもエラーログの内容が全然違うということに気づき断念（←気づくの遅い）
まだだ、次だ次。
いくつかの質問箱を覗くも、全て自分とは状況が違うことに気づく。
なにを見て判断をしたらいいのか悩んでいると、そういえばpower shellでnpm installを実行した時点で、エラーでてたよね？と思い出す。
##その3: npm installした時のコマンドをみてみる
power shellに戻って、やはりnpm installした後、赤い字で警告されていることに気づく。
found 30 vulnerabilities (28 low, 2 moderate)
run `npm audit fix` to fix them, or `npm audit` for details
和訳：30件の脆弱性が見つかりました（28件の低レベル、2件の中レベル
npm audit fix` を実行して修正するか、`npm audit` を実行して詳細を確認します。）
なるほど、これちゃんとinstallできてないじゃんと確信し、found 30 vulnerabilitiesで検索すると、いい記事を発見。
概要記事
2018年4月にnpm v6.0.0がリリースされ、セキュリティチェックができるコマンドnpm auditが追加されました。
さらに2018年5月にはnpm6.1.0がリリースされ、セキュリティチェックに追加して脆弱性のある箇所を自動修正してくれるサブコマンドnpm audit fixが追加されました。
この機能は非常に便利で、node_modulesに存在する大抵の脆弱性を自動修正してくれます。しかし、パッケージの依存関係によって自動で直しきれない脆弱性が残ってしまうことがあり、現時点ではこれを手動で解消しなくてはいけません。その方法を共有します。
[【脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す】]
(https://qiita.com/hibikikudo/items/0af352acac85fce28ec2)
結論を先に述べると、こちらで直りました。
私の場合は、自動修正だけで直ったので、npm audit fixだけでいけた。
そして、power shellで確認すると、すべて修正されたことが表示された。
fixed 30 of 30 vulnerabilities in 25743 scanned packages
和訳：
25743 個のスキャン済みパッケージの 30 個中 30 個の脆弱性を修正
そして、もう一度npm run serveを実行すると、無事にコンパイルされた！
vue-cli-service serve
INFO Starting development server...
98% after emitting
DONE Compiled successfully in 50675ms
和訳：
vue-cli-serviceのサービスを提供します。
INFO 開発サーバーの起動...
エミット後98%になりました。
DONE 50675msで正常にコンパイルされました。
反省点
初学者が注意すべき点として、ググった解決方法が100%自分に当てはまることはほぼないので、まずはエラーをきちんと読むという大切さに改めて気づきました。意識していたつもりが、実際にはできてなかったということですね。もっとはやくエラーを読み込んでいたら、5分で解決できたじゃん。と反省しました。