LoginSignup
3
3

More than 3 years have passed since last update.

Vue CLIでbuildしたWebサイトを公開する方法

Last updated at Posted at 2020-08-03

この記事で行うこと

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

buildする
npm run build

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

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

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

最後に

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3