#この記事で行うこと
この記事では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を作成して下記を記述する。
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サイト）をデプロイして公開するまでの手順です。
この記事が参考になれば幸いです。