web-dev-qa-db-ja.com

Vueアプリをデプロイする方法

vue-cliを使ってVueアプリを開発した後はどうすればいいですか？

Angularでは、すべてのスクリプトを1つのスクリプトにまとめるコマンドがいくつかあり、それからこれらのファイルがHostに送信されます。

Vueに同じものがありますか？

vue.jsvuejs2vue-cli
85
artem0071

私はあなたがこのようにあなたのプロジェクトを作成したと思います：

vue init webpack myproject

さて、今あなたは走ることができます

npm run build

Index.htmlと/ dist /フォルダをWebサイトのルートディレクトリにコピーします。完了しました。

126
Egor Stambakio

プロジェクトを作成したことがある場合

vue init webpack myproject

プロジェクトには開発と運用の両方に対応するように構成されたWebパックがあるため、NODE_ENVをproductionおよびrunに設定する必要があります。

NODE_ENV=production npm run build

dist/ディレクトリをWebサイトのルートディレクトリにコピーします。

Dockerを使用してデプロイする場合は、dist/ディレクトリを提供する高速サーバーが必要です。

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]
14
akinjide

あなたの端末で

npm run build

そしてあなたはdistフォルダをホストします。詳細については この動画を参照してください

5
anasmorahhib

パスに問題がある場合は、config/index.jsファイルのassetPublicPathをサブディレクトリに変更する必要があります。

http://vuejs-templates.github.io/webpack/backend.html

3
jntme

プロジェクトを作成したときにvue-cliとwebpackを使用した場合.

あなたはただ使うことができます

npmコマンドラインでbuildコマンドを実行すると、プロジェクトにdistフォルダが作成されます。このフォルダの内容をあなたのFTPにアップロードして完了です。

1
user3348410

このISカスタムフォルダーへの展開用（アプリをルートに配置しない場合、URL/myApp /など）-Iこの答えを見つけるために長い間探していました...それが誰かを助けることを願っています。

https://cli.vuejs.org/guide/ でVUE CLIを取得し、UIビルドを使用して簡単にします。その後、構成でパブリックパスを/ whatever /に変更し、そのURL/whateverにリンクできます。

さらにヘルプが必要な場合は、CLIを使用してvueアプリを作成する方法を説明するこのビデオをご覧ください。 https://www.youtube.com/watch?v=Wy9q22isx

0
Rick K.

VUE-CLIを使用せずにこれを行う1つの方法は、すべてのスクリプトファイルを1つのfat jsファイルにまとめてから、その大きなfat javascriptファイルをメインテンプレートファイルに参照することです。

私はwebpackをバンドルとして使用し、projectのルートディレクトリにwebpack.conig.jsを作成することを好みます。エントリポイント、出力ファイル、ローダーなどの設定はすべてその設定ファイルに格納されます。その後、webpack configsにwebpack.config.jsファイルを使用するpackage.jsonファイルにスクリプトを追加してファイルの監視を開始し、webpack.config.jsファイル内の上記の場所にJsバンドルファイルを作成します。

0
Yash_6795

  1. npm run build - これはコードを醜くして小さくするでしょう

  2. あなたのウェブサイトのルートディレクトリにindex.htmlとdistフォルダを保存してください。

  3. あなたが興味を持っているかもしれない無料ホスティングサービス - Firebaseホスティング。

0
user10543871

このコマンドは開発サーバーを起動するためのものです。

npm run dev

このコマンドはプロダクションビルド用です。

npm run build

必ず「dist」という名前の生成されたフォルダ内を確認してください。
次に、それらすべてのファイルをサーバーにプッシュします。

0
Farcrew Rz

Vue-cliが使えると思います

デプロイの一環として静的アセットを処理するバックエンドフレームワークと一緒にVue CLIを使用している場合は、Vue CLIがビルドファイルを正しい場所に生成したことを確認してから、バックエンドフレームワークのデプロイ指示に従うだけです。 。

フロントエンドアプリケーションをバックエンドとは別に開発している場合、つまりバックエンドがフロントエンドと通信するためのAPIを公開している場合、フロントエンドは基本的に純粋に静的なアプリケーションです。 distディレクトリにある構築済みコンテンツをどの静的ファイルサーバにもデプロイできますが、必ず正しいbaseUrlを設定してください。

0
Loveun CG

どのコードを実行するかのコマンドは、package.jsonファイル内のスクリプトの下にリストされています。これが私の例です：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

あなたがあなたのサイトをローカルで運営することを考えているなら、あなたはそれを使ってそれをテストすることができます

npm serve

あなたが本番用にあなたのサイトを準備しようとしているなら、あなたは使うでしょう

npm build

このコマンドはあなたのサイトの圧縮バージョンを持つdistフォルダを生成します。

0
Gene Yllanes

リモートサーバーを構築してリモートサーバーに送信したい場合は、cli-service（ https://cli.vuejs.org/guide/cli-service.html ）vue-cli-plugin-s3-deployのようにいくつかの特定のプラグインを使ってサービスを提供したりビルドしたりデプロイするタスクを作成できます

0
Gilson Doi Junior