vue를 패키징한 후 인터페이스 경로 api가 누락되면 어떻게 해야 하나요?-프런트엔드 Q&A-php.cn

vue를 패키징한 후 인터페이스 경로 api가 누락되면 어떻게 해야 하나요?

PHPz

풀어 주다： 2023-04-13 13:48:12

원래의

1805명이 탐색했습니다.

프론트엔드 기술의 지속적인 발전에 따라 프론트엔드 프레임워크도 지속적으로 개선되고 최적화됩니다. 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나는 Vue입니다. Vue는 가볍고 배우고 사용하기 쉬우며 대다수의 개발자가 선호합니다. 하지만 Vue를 사용하는 과정에서 일부 개발자는 패키징 후 인터페이스 경로(api)가 사라지는 문제에 직면했습니다. 그렇다면 문제는 무엇입니까?

문제 설명

개발 과정에서 우리는 다음과 같은 인터페이스 경로를 사용합니다:

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

로그인 후 복사

Vue 프로젝트를 패키징한 후 다음과 같은 인터페이스 경로(api)가 사라지는 것을 발견할 수 있습니다:

const url = 'user/login';

로그인 후 복사

This 요청 인터페이스가 실패했습니다.

문제 원인

이 문제가 발생하는 이유는 Vue가 패키징에 webpack을 사용하는데, webpack의 패키징 방식은 JS, CSS, 이미지 등 모든 리소스를 패키징하여 압축하기 때문입니다.

Vue 프로젝트에서 vue.config.js 구성 파일을 살펴볼 수 있습니다. vue.config.js配置文件：

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

로그인 후 복사

其中，publicPath是我们在打包之后使用的路径。在开发环境下，我们使用的是/，表示根路径；而在生产环境下，我们使用的是./，表示相对路径。

由于我们的接口路径(api)是绝对路径，因此在打包时，接口路径(api)就会被打包成相对路径。这样就导致了接口路径(api)消失的问题。

解决方法

针对这个问题，我们可以采用以下几种方法进行解决。

方法一：使用绝对路径

我们可以将接口路径(api)改为绝对路径，即添加域名前缀，如：

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

로그인 후 복사

这样，在打包时，接口路径(api)就不会被打包成相对路径了。

方法二：配置代理

我们可以在vue.config.js

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

로그인 후 복사

그 중 publicPath는 패키징 후 사용하는 경로입니다. 개발 환경에서는 /를 사용하여 루트 경로를 나타내고, 프로덕션 환경에서는 ./를 사용하여 상대 경로를 나타냅니다.

저희 인터페이스 경로(api)는 절대 경로이므로 패키징 시 인터페이스 경로(api)는 상대 경로로 패키징됩니다. 이로 인해 인터페이스 경로(api)가 사라지는 문제가 발생합니다.

Solution

이 문제를 해결하려면 다음 방법을 사용하여 해결할 수 있습니다.

방법 1: 절대 경로 사용

인터페이스 경로(api)를 절대 경로로 변경할 수 있습니다. 즉,

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

로그인 후 복사

와 같은 도메인 이름 접두사를 추가할 수 있습니다. 이런 식으로 패키징할 때 인터페이스 경로( api)는 상대 경로로 패키징되지 않습니다. 🎜🎜방법 2: 프록시 구성🎜🎜vue.config.js 구성 파일에 프록시를 추가하여 인터페이스 경로(api)를 대상 주소로 전달할 수 있습니다. 개발 환경에서는 그 자체가 프록시 서버인 개발 서버를 사용하여 전달을 위해 이 프록시 서버를 사용할 수 있습니다. 🎜rrreee🎜프록시를 구성한 후 코드에서 인터페이스를 요청할 때 다음과 같은 상대 경로만 작성하면 됩니다. 🎜rrreee🎜이렇게 하면 패키징 후에도 인터페이스 경로(api)가 사라지지 않습니다. 🎜🎜방법 3: vue-cli-plugin-apimock 사용🎜🎜인터페이스 모의를 위해 vue-cli-plugin-apimock 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 개발 단계에서 모의 데이터와 함께 인터페이스 경로(api)를 사용한 다음 패키징 중에 인터페이스 경로(api)를 실제 인터페이스 주소로 바꿀 수 있습니다. 이를 통해 개발 효율성을 보장할 수 있을 뿐만 아니라 인터페이스 경로(api)가 사라지는 문제도 방지할 수 있습니다. 🎜🎜요약🎜🎜위의 분석을 통해 패키징 시 절대 경로를 상대 경로로 변환함으로써 인터페이스 경로(api)가 사라지는 문제가 발생함을 알 수 있습니다. 이 문제를 해결하기 위해 절대 경로를 사용하거나, 에이전트를 구성하거나, vue-cli-plugin-apimock 플러그인을 사용할 수 있습니다. 어떤 방법을 선택할지는 우리의 실제 상황과 필요에 따라 다릅니다. 🎜

위 내용은 vue를 패키징한 후 인터페이스 경로 api가 누락되면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!