Vue.js コンパイルするときのポイント

Vue.jsを使って開発していると、コードを修正したのに画面に反映されないということがあります。
そんなときに関係してくるのがコンパイルです。

今回は、Vue.jsでコンパイルするときのポイントを紹介します。

コンパイルとは何か？

簡単にいうと、自分が書いたVue.jsのコードを、ブラウザが動かせる形に変換する作業です。

イメージとしては、

Vue.jsのコード
↓
コンパイル
↓
ブラウザで動くJavaScript

という流れです。

そのため、Vue.jsのコードを修正したあとは、コンパイルを実行しないと変更が画面に反映されません。

npm run devは開発用

開発中にVue.jsをコンパイルするときは、以下のコマンドを使います。

npm run dev

コードを修正したので、動作確認したい場合に使うコマンドです。

本番環境ではnpm run prod

本番環境へ公開するためのファイルを作る場合は、

npm run prod

を使います。

npm run dev
↓
開発・動作確認用

npm run prod
↓
本番公開用

というイメージです。

ただし、プロジェクトによって使えるコマンドが違うので、package.json の scripts の確認が必要です。

反映されない場合の確認ポイント

Vue.jsのコードを修正したのに画面に反映されない場合は、次の順番で確認します。

  1. １．コンパイルしたか？
    npm run dev

を実行してみます。

  1. ２．エラーが出ていないか？

コンパイル中にコンソールにエラーが出ていないか確認します。

  1. ３．ブラウザのキャッシュが残っていないか？

ブラウザに古いファイルが残っている場合があります。

Chromeなら、

Ctrl + Shift + R

で強制リロードして改善するか確認します。

Dockerを使っている場合は注意が必要

Docker環境では、npm run devをどこで実行するかも重要です。

docker exec -it docker_container_name bash

でDockerコンテナに入ってから、

npm run dev

を実行する必要があります。

木曜日担当：nishida

このエントリーをはてなブックマークに追加


nishida at 2026年08月06日 10:00:00


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓