vue-cli をパッケージ化する際にプロジェクト関連の設定ファイルを抽出する問題について (詳細なチュートリアル)

ここで、vue-cli に基づいてパッケージ化する際のプロジェクト関連の設定ファイルの詳細な説明を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

前書き: 開発に vue-cli を使用する場合、インターフェイスのリクエスト アドレス (axios.defaults.baseURL) などのいくつかの設定を動的に構成する必要があることがよくあります。これらの設定は、プロジェクトのコンパイル後に設定する必要がある場合があります。ここで、これらの設定ファイルを抽出し、webpack が設定ファイルをコンパイルしないようにする必要があります。

まず、構成ファイルとして /static の下に新しい js ファイルを作成する必要があります

内容は次のとおりです:

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

ここでは、すべての構成がウィンドウ オブジェクトの属性に挿入されます。これはカスタマイズできます。属性

次に、このjsをindex.htmlに導入します

<script src="/static/js/config.js"></script>

プロジェクトで使用する場合は、window.gを直接使用してこの設定ファイルの内容を呼び出します。

このような設定を行った後にパッケージ化すると、このような効果が生じます

ここで設定ファイルがそのまま出力され、パッケージ化されないことがわかります。 そして、コンパイルされたフロントエンドプロジェクトを渡すと、導入担当者が導入のためにバックグラウンド アドレスを事前に問い合わせる必要はなく、設定の内容を変更することでサーバー アドレスを直接決定できます。

このようにして、プロジェクト関連の設定ファイルを抽出することができます。

上記は、今後皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptナビゲーションバーの実装方法

vue.jsのcomputed、filter、get、setの使い方と違いを詳しく解説

ドメイン名の購入から利用まで詳しく解説pm2からノードをデプロイするjsプロジェクトの全プロセス

以上がvue-cli をパッケージ化する際にプロジェクト関連の設定ファイルを抽出する問題について (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。