未分類

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

iPhoneでマイナンバーカード

昨日6月24日からiOS18.5以降を搭載するiPhoneに
マイナンバーカードを登録できるようになったそうです。

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


tanaka at 2025年06月25日 10:00:00

年末年始営業のご案内

拝啓　年の瀬も押し詰まり、ご多用のことと存じ上げます。
さて、誠に勝手ながら、弊社の年末年始の営業は、下記のとおりとさせていただきます。
皆様にはご迷惑をお掛けしますが、何卒ご容赦願います。
今年一年ご愛顧を賜りまして大変感謝申し上げますと伴に、皆様のご多幸をお祈りいたします 。

敬具

記

年内営業　　　令和6年12月27日　15：00まで
年始営業　　　令和7年1月6日　10：00より

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


SH at 2024年12月27日 11:01:51

新年のご挨拶

謹んで新年のお慶びを申し上げます。

本年もより一層尽力してまいりたいと存じておりますので、
何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。

株式会社ギガスジャパン　社員一同

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


SH at 2024年01月05日 11:40:45

年末年始営業のご案内

拝啓　年の瀬も押し詰まり、ご多用のことと存じ上げます。
さて、誠に勝手ながら、弊社の年末年始の営業は、下記のとおりとさせていただきます。
皆様にはご迷惑をお掛けしますが、何卒ご容赦願います。
今年一年ご愛顧を賜りまして大変感謝申し上げますと伴に、皆様のご多幸をお祈りいたします 。

敬具

記

年内営業　　　令和5年12月28日　15：00まで
年始営業　　　令和6年1月5日　10：00より

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


SH at 2023年12月28日 02:31:35


アプリ関連ニュース

お問い合わせはこちら

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

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

お問い合わせフォーム


↑

↓