Vue 프로젝트의 앞뒤 부분 연결(proxyTable을 사용하여 도메인 간 방식)
2049 단어 Vue앞뒤 끝연조proxyTable도메인 간
사용 방법: vue는 프로필에 proxyTable을 제공하여 크로스 필드, config 폴더의 index를 설정합니다.js 파일
dev: { //
//
assetsSubDirectory: 'static',
//
assetsPublicPath: '/',
// ， API
// 'localhost:8080/api/xxx' 'http://xxxxxxx.com/xxx'
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', //
// secure: false, // https ，
changeOrigin: true, // ，
pathRewrite: {
'^/api': '', // http://xxxxxx.com:8080/xxx
}
}
}
}에이전트를 사용하려면 우선 이 연결을 에이전트로 해야 한다는 표지가 있어야 한다.그렇지 않으면 당신의 html, css, js 등 정적 자원이 모두 에이전트로 달려갈 수도 있습니다.그래서 우리는 인터페이스만 에이전트를 사용하고 정적 파일은 로컬을 사용한다.
'/api': {}, 내 인터페이스가'/api'로 시작해야 에이전트를 사용할 수 있다는 것을 node에게 알려주는 것입니다.그래서 너의 인터페이스는 이렇게 써야 한다./api/xx/xx.마지막 프록시 경로는http://xxxxxx.com/api/xx/xx.
그런데 틀렸어요. 제 정확한 인터페이스 경로에/api가 없어요.그래서 pathRewrite가 필요합니다. "^/api": "/api"를 제거합니다. 이렇게 하면 정확한 표지가 있을 뿐만 아니라 인터페이스를 요청할 때api를 제거할 수 있습니다.
보충 지식: vue2./vue.3.x 전역 실현(proxytable/proxy)
vue2.x
config/index.js
proxyTable: {
'/api': {
target: 'http://localhost:3000/', //
// secure: false, // https ，
changeOrigin: true, // ，
pathRewrite: {
'^/api': ''
}
}
},vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/static/mock'
}
}
}
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
