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

で角度 1つのスクリプトにすべてのスクリプトをバンドルし、いくつかのコマンドがあった、その後、これらのファイルをホストに送信されます。

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

次のようにプロジェクトを作成したと思います。

vue init webpack myproject

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

npm run build

index.htmlおよび/ dist /フォルダーをWebサイトのルートディレクトリにコピーします。できました。

以下を使用してプロジェクトを作成した場合：

vue init webpack myproject

NODE_ENVプロジェクトには開発用と本番用の両方で構成されたWebパックがあるため、を本稼働用に設定して実行する必要があります。

NODE_ENV=production npm run build

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

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" ]

あなたの端末で

npm run build

そして、distフォルダーをホストします。詳細 については、このビデオを参照してください

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

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

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

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

ローカルでサイトを実行したい場合は、

npm serve

サイトを本番用に準備する場合は、

npm build

このコマンドは、サイトの圧縮バージョンを含むdistフォルダーを生成します。

アプリケーションを本番環境にデプロイするには、次を追加します

"build": "vue-cli-service build --mode prod"

スクリプト内のpackage.jsonファイル。

main.jsを開いて追加します

Vue.config.productionTip = false;

インポート直後。次に、プロジェクトフォルダーでCLIを開き、このコマンドを実行します

npm run build

これにより、プロジェクトディレクトリにdistフォルダーが作成されます。ホストにそのdistフォルダーをアップロードすると、ウェブサイトがライブになります

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

npm run dev

このコマンドが本番ビルド用である場合：

npm run build

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

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

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

あなたはvue-cliを使うことができると思います

デプロイメントの一部として静的アセットを処理するバックエンドフレームワークと一緒にVue CLIを使用している場合、必要なことは、Vue CLIがビルドされたファイルを正しい場所に生成し、バックエンドフレームワークのデプロイメント手順に従うことだけです。 。

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

1. npm run build-これはコードを醜く、小さくします

2. index.htmlとdistフォルダーをWebサイトのルートディレクトリに保存します。

3. 興味のある無料のホスティングサービス-Firebaseホスティング。

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

あなたはちょうど使うことができます

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

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

https://cli.vuejs.org/guide/で VUE CLIを入手してください、UIビルドを使用して簡単に実行できます。次に、構成でパブリックパスを/ whatever /に変更し、URL / whateverにリンクできます。

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

Vueのドキュメントには、さまざまなホストプロバイダーに展開する方法に関するこれに関する多くの情報が記載されています。

npm run build

これは、パッケージのjsonファイルから見つけることができます。スクリプトセクション。テストおよび開発用のスクリプトと、本番用のビルドを提供します。

プロジェクトのgithubリポジトリをサイトからリンクすることにより、プロジェクトをバンドルするnetlifyなどのサービスを使用できます。また、herokuなどの他のサイトにデプロイする方法についても説明します。

詳細はこちら

最初にVue Cliをグローバルにインストールする

npm install -g @vue/cli

新しいプロジェクトを作成するには、次のコマンドを実行します。

vue create project-name

走る

npm run serve 

Vue CLI> = 3は同じVueバイナリを使用するため、Vue CLI 2（vue-cli）を上書きします。それでも従来のvue init機能が必要な場合は、グローバルブリッジをインストールできます。

Vue Init Globally

npm install -g @vue/cli-init

vue initがvue-cli@2.xとまったく同じように機能するようになりました

Vue Createアプリ

vue init webpack my-project

開発者サーバーを実行する

npm run dev

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