vue をパッケージ化した後にインターフェイス パス API が見つからない場合はどうすればよいですか?

フロントエンド テクノロジーの継続的な開発に伴い、フロントエンド フレームワークも継続的に改善および最適化されています。現在、最も人気のあるフロントエンド フレームワークの 1 つは Vue です。Vue は軽量で、学習と使用が簡単で、大多数の開発者に好まれています。しかし、Vue を使用する過程で、一部の開発者は問題に遭遇しました。パッケージ化後にインターフェイス パス (API) が消えてしまったのです。だから問題は何ですか？

問題の説明

開発プロセス中、次のようなインターフェイス パスを使用します。

const url = '/api/user/login';

Vue プロジェクトをパッケージ化するときに、インターフェイス パス ( api ) が表示されなくなりました。例:

const url = 'user/login';

これにより、リクエスト インターフェイスが失敗しました。

問題の原因

この問題の理由は、Vue がパッケージ化に webpack を使用しており、webpack のパッケージ化方法が、JS、CSS、画像などを含むすべてのリソースをパッケージ化して圧縮することであるためです。 。

Vue プロジェクトの vue.config.js 設定ファイルを見てみましょう:

module.exports = {
  // 配置打包和部署的根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  // 打包时不生成.map文件，加快打包速度
  productionSourceMap: false
};

その中の publicPath はのパスをパッケージ化した後に使用します。開発環境ではルート パスを表す / を使用し、運用環境では相対パスを表す ./ を使用します。

インターフェイス パス (api) は絶対パスであるため、パッケージ化する際、インターフェイス パス (api) は相対パスにパッケージ化されます。これにより、インターフェイス パス (API) が失われるという問題が発生します。

解決策

この問題を解決するには、次の方法を使用できます。

方法 1: 絶対パスを使用する

インターフェイス パス (API) を絶対パスに変更できます。つまり、

const url = 'http://localhost:8080/api/user/login';

## のようなドメイン名プレフィックスを追加できます。 #このようにパッケージ化する際、インターフェースパス(api)は相対パスにパッケージ化されません。

方法 2: プロキシを構成する

vue.config.js 構成ファイルにプロキシを追加して、インターフェイス パス (API) をターゲット アドレスに転送できます。 。開発環境では、開発サーバー自体がプロキシサーバーになっており、転送にはこのプロキシサーバーを使用できます。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标地址
        changeOrigin: true, // 是否改变原始地址
        secure: true, // 是否使用https
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
};

プロキシを構成した後、コード内でインターフェイスをリクエストするときは、次のような相対パスを記述するだけです。

const url = '/api/user/login';

このようにして、インターフェイス パス (API)梱包後も消えません。

方法 3: vue-cli-plugin-apimock を使用する

vue-cli-plugin-apimock プラグインを使用してインターフェイスをモックできます。このプラグインを使用すると、開発フェーズ中にモック データでインターフェイス パス (API) を使用し、パッケージ化中にインターフェイス パス (API) を実際のインターフェイス アドレスに置き換えることができます。これにより、開発効率を確保できるだけでなく、インターフェースパス（API）が消失する問題も回避できます。

概要

上記の分析により、インターフェイス パス (API) が失われる問題は、パッケージ化中に絶対パスを相対パスに変換することが原因であることがわかります。この問題を解決するには、絶対パスを使用するか、エージェントを構成するか、vue-cli-plugin-apimock プラグインを使用します。どの方法を選択するかは、実際の状況とニーズによって異なります。

以上がvue をパッケージ化した後にインターフェイス パス API が見つからない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。