Firebase Hostingを使用したVue.jsアプリケーションのデプロイ

Question

vue-cliで作成されたvue.jsアプリケーションの初期設定をFirebase Hostingに配備する最も良い方法は何ですか？ 私は

npm run build

これは絵のようにバンドルされたJSファイルや資産を持つフォルダ「DIST」を作成して展開するためのVUEアプリを用意しました。

Then-は、グローバルにfirebaseツールをインストールした後、私はこれが内部のデフォルトのindex.htmlファイルと「パブリック」フォルダが作成されます

firebase init 

を実行します。

まずはfirebase.jsonで設定：

"hosting": { 
"public": "dist" 

}

および "DIST" フォルダにルートフォルダからのindex.html（VUEのindex.hltm）をコピーしました。 はその後、私は

firebase deploy 

で展開それは動作しますが、画像へのパスが壊れているように見えます。 私はそこプットVUEのindex.htmlをfirebase.json

 "hosting": { 
"public": "public" 

}

における "公共" へのパブリックフォルダを設定したが、その後 "DIST" が見つかりません。 "public"フォルダ内に "dist"フォルダを移動しました。最後に、アプリケーションはfirebase上でオンラインになっています。

しかし、今やnpm run devはもう動作しません。 Firebase cliはvue-cliを壊すようです。

vue-cliとfirebase-cliを一緒にプレイするにはどうすればいいですか？ CLIは

? What do you want to use as your public directory? 

タイプdistご希望のフォルダを要求したときに

Answer 1

ごfirebase initいくつかの質問を実行する...あなたのプロジェクトを使用して選択したいfirebaseどの機能のように、要求されます。これで、distフォルダがデプロイされます。

これを確認してくださいlink、これが役に立ちます。

Answer 2

私はそれを理解したと思います。 まず、vueアプリケーション用とFirebase-Hosting用の2つの独立したプロジェクトを保存します。 したがって、CLIは独立して動作し、何も壊れることはありません。 vue.jsアプリを開発し、npm run buildでデプロイメントの準備をしてください。後で必要となるのは、vue-projectルートのindex.htmlとフォルダdist CLIを使用してFirebaseプロジェクトを作成すると、空のフォルダにfirebase initが実行されます。ここでは、必要に応じてfirebase関数を維持することもできます。

firebase initの間にパブリックディレクトリを定義するか、またはその後にfirebaseのエントリを編集します。JSON

"hosting": { "public": "public"}

は、これはあなたのアプリケーションのルートディレクトリになります。 Vue.jsはindex.htmlをルートディレクトリに直接持ち、サブフォルダdistをその内部に持つことが想定されています。 distをroot-directoryとして定義するのは、あなたが望むものではありません。 vue-appの画像のような関連するパスは壊れてしまいます。 パブリックの設定はデフォルトのままにしてください。その後、Firebase-projectのpublicディレクトリ内のvue-projectのindex.htmlとdist -folderをコピーします。 必要な場合は、firebase serve を使用してローカライズをテストできます。すべてがうまくいけば、firebase deploy

を使って展開してください