vue.js에서 baseurl을 선택하는 방법

이 글에서는 vue.js가 코드 실행 환경에 따라 baseurl을 선택하는 방법을 주로 소개하고 참고하겠습니다.

공통 API 접두사를 구성하면 인터페이스 프록시 전달을 통해 로컬로 데이터를 더 잘 얻을 수 있거나 배포 중에 Nginx에서 역방향 프록시를 수행할 수 있습니다. 그러나 프로젝트에 파일 업로드가 필요한 많은 부분이 포함된 경우(파일 업로드는 Ajax를 사용하지 않습니다. method ), 더 나은 관리 인터페이스의 baseURL을 고려해야 합니다. 프로젝트에서 Ajax 요청은 axios를 사용합니다. 원본 코드는 다음과 같습니다

수정 전

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = '/development/api/doi/analys/upload'

Optimization method

찾아보세요. 및 config/prod.env.js에서 다음과 같이 코드에 변수 API_BASEURL(이름 사용자 지정)을 추가합니다.

module.exports = {
 NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别
 API_BASEURL: '"/development/api/"' // 需要自己添加的代码
}

그런 다음 baseURL을 사용해야 하는 API_BASEURL

로 바꿉니다.

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = process.env.API_BASEURL + '/doi/analys/upload'

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

React 구성 요소에서 이를 사용하는 방법을 자세히 설명합니다.

Vue 구성 요소에서 TypeScript 메서드를 사용하는 방법(자세한 튜토리얼)

vue 구성 요소가 전달한 개체에 단방향 바인딩을 구현하는 방법은 무엇입니까?

위 내용은 vue.js에서 baseurl을 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!