概要

Vueを触り始め、はや２ヶ月。
触り始めた頃にlocalhostでなんで！？となった初歩的なミスの解決法を書いてあります。

①別のプロジェクトが立ち上がる

npm run dev,yarn dev等でlocalhostを立ち上げているのに、別のタイミングで作業していたページが表示されてしまうということが起きたので、その問題の解決の手順を書いていきます。

どのような解決策を考えたか

複数のローカル環境を立ち上げていたため、私は最初キャッシュのようなものが残っているのかと考えていました。

スーパーリロード(command shift R)をしたり、ブラウザのキャッシュを削除しても改善されません。

原因

私の場合はターミナル上で自分がいる位置のディレクトリが違うことが原因でした。
Vueのプロジェクトを立ち上げたかったのに、前に作業していた別のプロジェクト（下記でいうReact-project）が立ち上がっていたのです。

sample@sampleUser React-project % npm run dev

> React-project@0.0.0 dev
> vite

Port 8000 is in use, trying another one...

  VITE v5.2.10  ready in 320 ms

  ➜  Local:   http://localhost:8001/
  ➜  Network: http://111.111.1.111:8001/
  ➜  press h + enter to show help

上記の立ち上がり方だとlocalhost:8000番が使われているということもわかるので、その辺も含めて原因を探せると別の原因にも気づけると思います。

解決法

cdコマンドか、新しいターミナルを立ち上げる等で該当のルートフォルダに移動してから行えば解決します。

別のプロジェクトが立ち上がる件のまとめ

VS Codeで開発を行っているのですが、いつもそのフォルダを開くと自動的に該当のrootフォルダのターミナルが立ち上がっていたの気にしておらず意外とハマってしまいました。

②ホットリロードが効かない

ファイルを変更しているのに、ローカル環境のページに反映されないという問題に直面しました。

ホットリロード（ライブリロード）とは

localhostには自動でファイル上の変更を検知して、反映してくれる機能があります。これをホットリロードを呼びます。

どのような解決策を考えたか

コンポーネントの数が多かったため最初は間違えて違うファイルを触ってしまっていることを考えましたが、その時の場合は違いました。

こちらも、キャッシュ等を考えましたが違いました。

原因

私の場合は階層構造を見直そうと、ファイルの階層構造を変えてしまっていたことが原因でした。

変更前

vue-project
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   │   ├── Header.vue
│   │   ├── Body.vue
│   │   ├── Footer.vue
│   │   └── Button.vue
│   ├── router
│   │   └── index.ts
│   │

変更後
componentsフォルダの中にフォルダが追加されています。

vue-project
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   │   ├── Organisms
│   │   │   ├── Header.vue
│   │   │   ├── Body.vue
│   │   │   └── Footer.vue
│   │   └── atoms
│   │       └── Button.vue
│   ├── router
│   │   └── index.ts
│   │

解決法

npm run dev,yarn dev等で新しくlocalhostを立ち上げることで解決します。

ホットリロードが効かなくなってしまった件のまとめ

ファイルの位置を変更すると、開発サーバーがその変更を検知できず、ファイルが監視対象から外れてしまった可能性が高いのではないかと考えています。その結果、ファイルの変更が自動的に検知されず、ホットリロードが機能しなくなってしまったのでしょう。

まとめ

この記事を見た方が1分でも早く解決し、初歩的なミスに時間が取られず、どんどん成長に時間を割いていければ幸いです。ありがとうございました。