LoginSignup
3
1

More than 3 years have passed since last update.

vue-cli開発途中でのVuetifyインスト―ル時のエラー

Last updated at Posted at 2020-12-30

状況(何していた?)

・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 a public 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 file public/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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1