z_blog:2018:181125_vue_install

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181125_vue_install [2018/11/25] – [Firebase Hostingにデプロイ（アップロード）] adash333
+++ z_blog:2018:181125_vue_install [2018/11/25] (現在) – [今回写経した本] adash333
@@ 行 1: / 行 1: @@
 ====== 181125 WindowsでVue.jsを始める ======
 Ionic4がいつまでたってもbeta版のままなので、Vue.jsを触ってみたくなり、以下の本を衝動買い。
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
@@ 行 203: / 行 205: @@
 (変更後)
 {{:z_blog:2018:pasted:20181125-212504.png}}
+==== index.htmlの移動と修正 ====
+dist/index.htmlを削除する。
+{{:z_blog:2018:pasted:20181125-212942.png}}
+index.html　を、dist/ フォルダに移動し、さらに以下のように修正
+{{:z_blog:2018:pasted:20181125-213032.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213205.png}}
+==== .gitignoreの修正 ====
+今回移動したindex.htmlを、.gitignoreから除外しておく。
+(変更前)
+{{:z_blog:2018:pasted:20181125-213335.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213412.png}}
+==== buildとdeploy ====
+ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+表示されたURLを、Ctrlを押しながらクリックすると、ブラウザで開く。
+{{:z_blog:2018:pasted:20181125-213914.png}}
+しかし、今回、残念なことに、画像がうまく表示されなかった。。。原因は不明。。。
+{{:z_blog:2018:pasted:20181125-214005.png}}
+写経元の本をもう一度読み直したら、webpack.config.js　の8行目を変更し忘れていました。
+<code>
+//(変更前)
+publicPath: '/dist/',
+//(変更後)
+publicPath: '/',
+</code>
+webpack.config.js
+(変更前)
+{{:z_blog:2018:pasted:20181125-223644.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-223723.png}}
+もう一度、ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+{{:z_blog:2018:pasted:20181125-225815.png}}
+これで、ちゃんと、画像も表示された。
+{{:z_blog:2018:pasted:20181125-225852.png}}
@@ 行 214: / 行 286: @@
 ===== 今回写経した本 =====
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=0e00aed7bf793408cd3bbaf34c8bad45"></iframe>
 </html>
 ===== Vue.js関連ドキュメント =====

z_blog/2018/181125_vue_install.1543148722.txt.gz · 最終更新: 2018/11/25 by adash333