#この記事で行うこと
この記事ではVue CLIで作成したプロジェクト（Webサイト）をデプロイして公開するまでの手順を解説しています。

#背景
今回初めてvue-cliを使ったWebサイトを作成して「いざ公開」という時につまづいてしまった為、対処方法をまとめました。

#参考サイト
下記のサイトを参考にさせていただきました。
・Vue-CLI3でbuildすると画面が真っ白になる

#環境
Mac
-vue/cli v4.4.6
-npm v6.14.6
-node v12.16.3

#つまづいた原因
作成したデータをbuildすることはできましたが、buildされたdistフォルダをサーバーにアップロードされても何も表示されませんでした。

原因を調べてみるとbuildされたindex.htmlが参照するcssやjsのパスが違うことによるものということが判明
（Vue-CLI3でbuildすると画面が真っ白になるを参照）

#build準備からアップロード（デプロイ）まで
##buildする準備
プロジェクトのディレクトリ直下にvue.config.jsを作成して下記を記述する。

vue.config.js

module.exports = {
    publicPath: './'
}

以前はpublicPathではなくbaseUrlで実行することができたようですが、現在baseUrlでbuildを行うと
ERROR Invalid options in vue.config.js: "baseUrl" is not allowed
と表示され正しくbuildすることができません。

##build
ターミナルを開いて下記のコマンドを実行していきます。

buildしたいディレクトリに移動

buildする

実行後に
DONE Build complete. The dist directory is ready to be deployed.
と表示されればbuildは完了です。

##サーバーにアップロードする
あとはサーバーの任意のディレクトリに/distフォルダ内にあるファイルやフォルダをアップロードすれば完了です!

#最後に
以上がVue CLIで作成したプロジェクト（Webサイト）をデプロイして公開するまでの手順です。
この記事が参考になれば幸いです。