この記事で行うこと

この記事では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したいディレクトリに移動
cd ディレクトリ名前

buildする
npm run build

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

サーバーにアップロードする

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

最後に

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