[vue]ビルドが行えない。

Question

Vue.js を vue-cli を使ってシンプルにはじめてみる
上記の記事を参考にvueをいじっています。

プロジェクトを改造しながら理解する
全体の流れを理解する
のところで

ということで、実際に動いているソースを見るためにビルドを行います。

$ npm run build　すると ./dist というフォルダが作られその中に実際に動くソースが作られます。

とあるのですが、ターミナルに$ npm run buildと打ち込んでも何も起こりません。

App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

現在上記のようになっていますので、ここに続けて

$ npm run build

を入力しても反応ありません。

MacBook-Pro:プロジェクト名 ユーザー名$ npm run build

手入力で上記のように入力しても反応がありません。
どのように入力すればいいのでしょうか。
ターミナルに入力するのではないということなんでしょうか。

よろしくお願いします。

Answer 1

文中にあるApp running at:というのはserveで実行している結果なのではないでしょうか？
buildしてもこの環境には反映されないような気がします。
（誤っていればすみません。）

Comments

[keni1211]

なるほど、ありがとうございます。
ご指摘のようにこれ以前に
＄npm run serve
と入力した結果が、App running atになります。

ビルドはどこで行えば反映されるんでしょうか？

[tomomo]

serveは開発用サーバー（webpack-dev-server）を起ち上げ、HMRが動く。
これは開発用。

buildはプロダクションに対応したビルドをdistに作る。
（JSが圧縮されたりなど最適化されたファイルが生成される。）
それを本番用サーバー環境用意し自ら配備すればいいのではないでしょうか？

[keni1211]

回答ありがとうございます。
その後、run serveしたのちに作成したフォルダをVisual Studio Codeで開き、そこのターミナルでbuildを行うことができました。

いただいた回答なのですが、ちょっと単語が理解できず何を教えてもらっているのかわかりませんでした。ググってみたのですが、HMRは「Hot Module Replacement」の略語ということであってますか？
単語の意味がわかってないので、そこから学ばなくてはと思いました。

[tomomo]

あってます。JSの変更をリロードすることなく即反映してくれるもので、開発時に利用するものです。
serveはそういう環境を整えてくれます。