【Vue.js】XserverにVue CLIで作った超簡易ページをデプロイしてみた。

2978 ワード
vue-router Vue.js vue-cli xserver Vue.js テキストリンク

はじめに

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

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

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

制作アプリに関して


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

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

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

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

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

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


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


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

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

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

無事表示されました◎

参考サイト


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