vue-cli 2.9.1 における Webpack の問題の詳細な説明

Vue-cli が最近更新されました。これを使用してプロジェクトをビルドすると、bulid ファイルの下に dev-sever.js と dev-client.js という 2 つのファイルが不足していることがわかりました。この記事では主に の Webpack を紹介します。最新の vue-cli 2.9.1 には問題があります。編集者はこれが非常に優れていると考えていますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

vue-cli 2.8

vue-cli 2.9.1

これはなぜですか

package.jsonを確認してみましょう

vue-cli 2.8

vue-cli 2.9.1

最新バージョンの vue-cli の webpack バージョンが v3.6.0 に更新されていることがわかります。

更新されたので、webpack 設定項目を再度有効にしましょう。

vue の自動起動ブラウザの設定

この cli を実行するために npm run dev を起動すると、ブラウザを自分で起動できないことがわかりました

この場合、あまりにも大げさではないでしょうか? いいえ、いいえ、構成項目を変更する限り、まだ可能です

まず、npm run dev が何を実行するかを見てみましょう

package.json の script オプションの dev 構成を確認し続けます

vue-cli 2.9 .1 package.json

比較すると、npm run dev を実行すると、実際には webpack-dev-server –inline –progress –config build/webpack.dev.conf.js が実行されることがわかります

vue -cli 2.8 package.json

以前に npm run dev を実行することには違いがあり、これがこれら 2 つのファイルを削除したい理由を説明しています。これは、最新バージョンの webpack が構成で webpack-dev-server を使用しているためです。このプラグインのブラウザを起動するには、公式 Web サイト

build/webpack.dev.conf.js で API 使用手順の 1 つを確認し、実行パスでその構成を確認してください

vue-cli 2.9.1 build/webpack.dev .conf.js

APIを見てみると、openパラメータが自動起動サーバーを開く理由であることが分かりますが、config.dev.autoOpenBrowserとは何でしょうか？ config に対応する

を検索できます。require の定義は、それをロードすること、つまり、config ファイルの下のindex.js に対応する対応するパスを表示し続けることです。デフォルトの要件は、その下のindexファイル、index.js

config/index.jsに対応します

ここでのautoOpenBrowserはfalseに対応しているので変更したいのでtrueに変更します。最新バージョンの vue-cli 設定では、再起動後にサービスが自動的に開始され、設定されたポートが占有されている場合でも、そのポートに 1 が自動的に追加されます。サービス。

Hungry Me APPインターフェース設定の問題

bulidフォルダー内の2つのファイルが存在しないため、Hungry Meインターフェースを設定するにはどうすればよいですか?

Are You Hungry アプリのインターフェイスの設定原理を理解する前に、データは data.json ファイルから直接取得されるため、インターフェイスを作成するためにモックをシミュレートする必要があります。ただし、Hungry?APP の設定では、サービスを直接開始するときにインターフェイスが準備されているため、/api/seller に直接アクセスして、対応するデータを取得できます

vue-cli 2.9.1

vue-cli 2.9.1 では、特定のパラメーターは

vue-cli 2.9.1 の dev-server.js で直接設定されました

方法 1:

開始点に戻ります。 vue-cli の最新バージョンの設定、ブラウザ サービスはすべて webpack-dev-server プラグインに含まれているため、webpack.dev.conf.js で変更します

ここでの要件は、次のオープン方法です。サービス インターフェイス データも準備ができているので、そのプラグイン API を確認してみましょう。 devServer.before

devServer.before

というパラメーターが 1 つあります。

が問題の解決策です。 APIリクエストデータを直接送信できるように

webpack.dev.conf.js

を変更します

this.axios.get("/api/seller").then(function(res){
 // do something
})

方法2

ノードを知っている場合は、APIインターフェイスを作成することもできます直接ノード サービスを開くと、Hungry プロジェクトがこのインターフェイスに直接アクセスします。もちろん、クロスドメインの問題やルート マッピングが発生しますが、主に devServer パラメーターの設定がこの問題の解決に役立ちます。ルート マッピングなどに .proxy を使用します

ただし、自分の能力を考慮する必要がありますので、最初の方法を使用することをお勧めします

概要

フロントエンド テクノロジの更新が非常に速いため、それが最適です。対応する知識を日々学びます。主に下位層がこれらの問題を完全に理解できれば、それに応じて解決することができます。

関連する推奨事項:

vue-cli を使用して複数ページのアプリケーションを開発する方法

vue-cli を使用して vue アプリケーションを迅速に構築し、Webpack パッケージ化を実装する詳細な説明

vue-cli を使用してビルドする方法vueプロジェクトとwebpack?

以上がvue-cli 2.9.1 における Webpack の問題の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。