knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

netlify で、Vue.js (Vue CLI 3) のSPAサイトの設置 SPA開発(8) #Vue.js #firebase #web #SPA

index:

概要:

前のSPA(SinglePageApplication) 関連で、
netlify.com でのデプロイ公開 の内容となります。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

手順

事前にアカウントの作成しておきます。
(今回は、github アカウントで、ログイン)

https://app.netlify.com
 を開く。
・site タグ(ログインしたページ)
右上の [New Site from Git ]のボタンが表示されているページ
 を開く
=> 下側に、枠が表示され
[Want to deploy a new site ...
Drag and drop your site ...]
らしき、文字が見えますので。確認しておきます

f:id:knaka0209:20190428180220p:plain


・zipファイルの、準備
vue-CLI で、ビルドします。

npm run build

・ dist/ フォルダを、zip圧縮して
上記の、ドラッグ枠にドロップします。
 => サイト公開されます。

・ URLは、完了画面に。表示されたようです。

参考のページ

knaka0209.hatenablog.com

Update 2019/04/29

・ビルド後に、netlify
 で正常の、ページ再読込み等が動作しない場合の修正
=>vue-router で、historyモードが、build後に動作しない現象
masterブランチを更新しました。
https://github.com/kuc-arc-f/vue_2_ver2

・対応の関連
https://router.vuejs.org/ja/guide/essentials/history-mode.html