新しい Vue プロジェクトを作成した後、vue.config,js でバックエンド アクセス アドレスを構成する方法

Vue 2 プロジェクトでは、vue.config.js構成ファイルを通じてバックエンド アクセス アドレスを設定できます。簡単な例を次に示します。

1. プロジェクトのルート ディレクトリに新しいファイルを作成しますvue.config.js(既に存在する場合は、直接編集します)。
2. vue.config.js以下をファイルに追加します。

module.exports = {
    
    
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://backend.example.com',  // 设置后端接口的访问地址
        changeOrigin: true,
        pathRewrite: {
    
    
          '^/api': ''  // 将请求路径中的 '/api' 替换为空字符串
        }
      }
    }
  }
}

上記の設定では、targetフィールドはバックエンド インターフェイスのアクセス アドレスを指定します。ここでは、プロキシ機能を使用して、/api指定されたバックエンド アドレスから始まるリクエストを転送します。changeOriginこのオプションが に設定されている場合は、trueクロスドメイン アクセスが有効であることを意味します。

3. バックエンド インターフェイスの実際のアクセス アドレスがtargetフィールドと一致していることを確認してください。変更する必要がある場合は、'http://backend.example.com'実際のバックエンド アクセス アドレスに置き換えてください。

4. vue.config.jsファイルを保存し、Vue 2 プロジェクトを再起動します。

構成が完了すると、フロントエンドはバックエンド インターフェイスにアクセスするときに相対パスを使用できるようになり、/api/xxxプロキシはバックエンドによって指定されたアドレスに相対パスを転送します。たとえば、バックエンド インターフェイスにアクセスするにはhttp://backend.example.com/api/user、フロントエンド コードで を使用して/api/userリクエストを行うことができます。

上記の構成は開発環境 ( npm run serve) にのみ適用されることに注意してください。このプロキシ構成を実稼働環境で使用する場合は、それに応じて展開とサーバーの設定を調整する必要があります。