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';

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';

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