カツオ @SpringBootとVue.jsでWebサービス開発中

起業、転職、サラリーマン生活、Webサービス、アプリ、働き方、プログラミング、Java、JavaScript

javascript vue.js

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

投稿日:

作ったプロジェクトをサーバーに配置する方法です。この手順ですと静的リソースとしてローカルで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になってしまい、ちょっと詰まりました。。

-javascript, vue.js

執筆者:


comment

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

関連記事

no image

Javascriptでソート処理の実装(jQuery・カスタムデータ属性)

jQueryを使ったシンプルなソート機能のサンプルです。 こん感じでリスト要素があった時に、ボタンクリックで並び替え(ソート)処理を行います。 ※イメージのみです。動きません。 ソート 山田 鈴木 田 …

【vue.js】画像ファイルのアドレスの指定方法について【vuetify】

assets配下に格納している画像ファイルの指定方法についてちょっとつまって調べました。個人的によく忘れちゃうので画像などの静的リソースの指定方法についてメモしておきます。 imgタグの場合 < …

【vue.js】コンポーネント間のメソッドの呼び出し|親から子(ref)、子から親(emit)

Vue.jsで別コンポーネントに定義しているメソッドの呼び出し方についてメモしておきたいと思います。別コンポーネントの呼び出しは大きく2つ存在します。 親から子(ref) 子から親(emit) 最初に …

no image

【Vue.js】ファイルアップロード(複数ファイル)の渡し方(axios)

Vue.jsをつかって開発をやっています。画像アップロードを作りたくて、この2日くらい色々調べながら実装をしていました。ようやくそれなりに動くものができましたので、せっかっくなのでブログにも記載させて …

【Vue.js】ドラッグアンドドロップの実装方法(vuedraggable)

vue.jsでドラッグアンドドロップの実装ですが、「vuedraggable」を利用することで優れたUIを簡単に実装することができます。 vuedraggableの使い方については以下サイトがとても丁 …