【Vue.js】Vue CLIで作ったサイトをXserverにデプロイしてみた

はじめに

Vue CLIを使ったポートフォリオの制作は初めてだったので、とりあえず制作に取り掛かる前にデプロイができるのかどうか試してみました。

(せっかく作ったのにデプロイできないなんてなったら悲しすぎるので。。。笑)

結論、割と簡単にできました◎

追記:以下はバージョン2でのデプロイ方法でした。バージョン3だとconfig/index.jsファイルがない場合があるので、プロジェクト直下にvue.config.jsを作成して解決します。

制作アプリに関して

Vue CLIがバージョン2の場合

猫本を参考に、Vue CLIでVue Routerを用いた簡易ページをとりあえず作りました(本当に簡易的です。)

ナビバーにHomeとお問い合わせボタンがあり、そこでビューを切り替えるだけです。(もはやjQueryでやれ。。。)

Vue CLIで制作したアプリのリリースには、npm run buildでまずビルドする必要があるみたいです。

$npm run build

distディレクトリが作成され、その中にビルドされたファイルがあります。

ところがアクセスしたところ表示されない。。。

どうやらconfig/index.jsを以下のように書き換える必要があるとのこと。

// assetsPublicPath: '/',
assetsPublicPath: '',

あとはdistフォルダをじぶんの好きな名前(URLに反映される)に変えてFTPでアップロード。

僕の場合はXserver(WordPressに利用しているドメイン)を使っているのでpublic_htmlにhomeというフォルダ名でアップロードしました。

(ドメイン名)/home(アップロードしたフォルダ名)でアクセス。

無事表示されました◎

Vue CLIがバージョン3の場合

configディレクトリもindex.jsファイルも見当たらないケース。

上記のようにvue.config.jsを作成し、下記の記述。

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

ビルドを行うと、jsなどのパスが相対パスで出力される。

$npm run build

試しにデプロイしてみたところ、表示されました◎(以前Vue CLI用いたチュートリアルで作成したアプリで実験。)

参考サイト

vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話

バージョン2のケース

【Vue.js】CLI 3系でビルドしたファイルが表示されなかったら相対パスにしよう

バージョン3のケース

コメントを残す