【Vue.js】サーバーに公開する方法(ビルド手順)

投稿者: | 2018年10月23日

作ったプロジェクトをサーバーに配置する方法です。この手順ですと静的リソースとしてローカルでjavascript、cssをビルドしてくれますので、安いレンタルサーバーとかでも動作します。私も昔から使っているlolipopに試しに配置してみましたが、無事に動きました。

Vue.jsで作ったプロジェクトのサーバーへの公開手順

①ビルドする

コマンド一発です。

npm run build

これを実行しビルドに成功すると、プロジェクトフォルダ配下に「dist」フォルダが作成されます。

dist配下は以下の構成となります。

  • index.html
  • static フォルダ

②サーバーにアップする

  • index.html
  • static フォルダ

dist配下のファイルを全部まとめてサーバーにアップすればサーバーへ公開されます。

注意事項

index.htmlからstatic配下のリソースを呼び出しているのですが、呼び出しのパスが「https://domain/static/filename.js」のようにドメイン直下にstaticフォルダが配置されてることを期待したパス指定になっています。

ですので、Vue.jsでつくったファイルを配置するサーバー上のディレクトリにサブドメインでもよいのでドメインを割り当ててあげる必要がありそうです。

私は実験的にもともと使っていたドメイン配下にフォルダを作成して、その中にVue.jsの全リソースを格納したので、リソースが404になってしまい、ちょっと詰まりました。。


カツオが開発したWebサービスです。

「セールサーチ」ネットショップのセール情報の検索サイト!

平成の想い出を気軽に年表にしてシェアすることができるサービスです。ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です