【Vue.js】webpackビルドした後の「dist」フォルダについて

Vue CLIのnpm run buildでビルドした後にdistフォルダがVue.jsのルートディレクトリに生成されてVueで実装した動的コードが静的ファイルに生成されます。

フォルダ名	説明
dist
├css	実際にサーバーにアップロードする静的ファイル
├img	実際にサーバーにアップロードする静的ファイル
├js	実際にサーバーにアップロードする静的ファイル
├app.XXXX.js	開発中のソースを圧縮したファイルです。
├app.XXXX.js.map	開発中ソースのソースマップ、開発時にデバッグするために使います。本番にはアップロードしてはダメです。
├chunk-vendors.XXXX.js	node_modulesに入っていたライブラリを圧縮したファイルです。
└chunk-vendors.js.map	node_modulesに入っていたライブラリを圧縮したファイルのソースマップ、開発時にデバッグするために使います。本番にはアップロードしてはダメです。
├favicon.ico	実際にサーバーにアップロードする静的ファイル
└index.html	実際にサーバーにアップロードする静的ファイル

これらのdistディレクトリ内の静的ファイルを公開ディレクトリにアップロードすれば本番公開することが可能です。（今だったらフロントエンドはS3のホスティングサービスなどを使うのが一般的でしょうかね。）

ソースマップについて

ソースマップとは「xxx.js.map」となっているファイルのことです。Vue.js開発時には開発用ソースで言えば何行目に該当するかを把握するために使われます。

本番デプロイする場合は消すことが推奨されています。（というか消さないとダメです。）

Vue.jsの設定ファイルです。ここで公開ディレクトリについての設定があります。

もし、公開ディレクトリがデフォルトとは少し違う場合はここにパスを指定します。

例えば、公開ディレクトリが/path/index.htmlみたいになっているのであれば、以下のように指定します。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/path/' : '/',

1 2	module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/path/' : '/',

「process.env.NODE_ENV === 'production」にて本番モードの場合だけに適応させています。