状況(何していた?)
・PF作成用にVue.jsのツールの一環である"Vue CLI"を使ったアプリ開発中
・開発中にVue.jsで使用できる"Vuetify"という便利なマテリアルデザインのUIフレームワークがあることを知る。
・Vuetify公式ドキュメントを見て視認性の良さと開発効率UPの面から「使ってみたい!」と考え開発途中で取り入れようとした。
※公式ドキュメントも非常にわかりやすかったのも抵抗を感じずに取り入れようと思った理由の一つ
環境
Node v12.14.1
npm v6.13.4
vue/cli v4.5.9
事象
何が起こった?
・Vuetify公式ドキュメント(インストールの方法)の手順通りに実行
・元々Vue CLIはインストールしていたので、vue add vuetify
から実行
・すると、以下表示された
C:\Users\Owner\github_file\my_project2>vue add vuetify
📦 Installing vue-cli-plugin-vuetify...
+ vue-cli-plugin-vuetify@2.0.9
added 9 packages from 8 contributors in 62.136s
39 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...
added 14 packages from 19 contributors in 33.468s
41 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
ERROR Error: ENOENT: no such file or directory, open 'C:\Users\Owner\github_file\my_project2\public\index.html' // ココ!!!
Error: ENOENT: no such file or directory, open 'C:\Users\Owner\github_file\my_project2\public\index.html'
at Object.openSync (fs.js:440:3)
at Object.writeFileSync (fs.js:1265:35)
at Object.updateFile (C:\Users\Owner\github_file\my_project2\node_modules\vue-cli-plugin-vuetify\generator\tools\helpers.js:43:6)
at Object.addLinks (C:\Users\Owner\github_file\my_project2\node_modules\vue-cli-plugin-vuetify\generator\tools\fonts.js:55:11)
at C:\Users\Owner\github_file\my_project2\node_modules\vue-cli-plugin-vuetify\generator\index.js:33:35
at runGenerator (C:\Program Files (x86)\Nodist\bin\node_modules\@vue\cli\lib\invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:94:5)
at async invoke (C:\Program Files (x86)\Nodist\bin\node_modules\@vue\cli\lib\invoke.js:92:3)
上のコードの内、ここでエラーが発生
ERROR Error: ENOENT: no such file or directory, open 'C:\Users\Owner\github_file\my_project2\public\index.html'
ココがエラー吐きだした箇所になります。
エラーの内容はざっくりいうと「『'...my_project2\public\index.html'を開いて!』って指示されたけど、そんなファイルやディレクトリはないよ!!!」ってな感じです。怒られた(´・ω・`)
何をした?
・あんまり日本人の方で同じエラー吐きだした境遇の方がいなかったので色々調べてみました。
・そこで以下"git memory"の回答を発見
No such file or directory, open './public/index.html'(git memory)
解決策は?
・上記サイトの中で解決策は以下の英文。
※サイトから抜粋
I don't have apublic
folder in my project folder. I don't know if there changes something in vue (I'm just started with vue). If I'm creating the filepublic/index.html
and run the command again, there will be two lines added into the file:...
・上記をざっくり日本語訳すると、
「僕もpublic
なんてフォルダは開発中のフォルダに入ってないよ!僕もVueは触りだしたばかりだから(先ほどのvue add vuetify
の実行によって)Vueの中で何が起きたかわからないな…。今publicファイル
とその中にindex/html
を作ってみてもう一回さっきのコマンド(vue add vuetify
)を実行してみたら、以下の2行がindex.htmlに追加されたよ。」
・「なんて強引な…(´Д`)」と思いながら自分でも実行してみると。。。
C:\Users\Owner\github_file\my_project2>vue add vuetify
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing vue-cli-plugin-vuetify...
+ vue-cli-plugin-vuetify@2.0.9
updated 1 package in 46.063s
41 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
🚀 Invoking generator for vue-cli-plugin-vuetify...
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
vuetify Discord community: https://community.vuetifyjs.com
vuetify Github: https://github.com/vuetifyjs/vuetify
vuetify Support Vuetify: https://github.com/sponsors/johnleider
正常にVuetifyがインストール完了しました!
Jacek Karczmarczyk jacekkarczmarczykさん、ありがとうございますm(__)m
※参考
・Vuetify公式ドキュメント
・No such file or directory, open './public/index.html'(git memory)
最後まで見ていただきありがとうございます!m(__)m