도메인 간 라우팅 충돌을 해결하기 위한 Vue의 아이디어 정보

이 글은 주로 도메인 간 라우팅 충돌 문제를 해결하는 Vue에 대한 아이디어를 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

Vue.js(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 이 글은 도메인 간 라우팅 충돌을 해결하기 위한 Vue의 아이디어 분석에 대한 자세한 소개를 제공합니다. 필요한 친구는 이 글을 참고할 수 있습니다

vue 소개#🎜🎜 ##🎜 🎜#Vue.js(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다.

Vue는 뷰 레이어에만 집중하고 상향식 증분 개발 설계를 채택합니다.

Vue의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다.

Vue는 배우기 매우 쉽습니다. 이 튜토리얼은 Vue 2.1.8 버전 테스트를 기반으로 합니다.

라우팅에서 다음 프록시를 구성하면 도메인 간 문제를 해결할 수 있습니다.

proxyTable: {
   '/goods/*': {
    target: 'http://localhost:3000'
   },
   '/users/*': {
    target: 'http://localhost:3000'
   }
  },

이 구성 방법은 도메인 간 문제를 어느 정도 문제가 생기겠지만,

예를 들어 우리의 vue 경로도 good이라는 이름으로 되어 있는데 이때

인터페이스가 많으면 충돌이 발생합니다. 프로젝트에서는 모두 여기에서 구성됩니다. 이는 매우 번거롭고 라우팅 충돌이 발생하기 쉽습니다.

올바른 자세

모든 인터페이스가 하나의 입구로 통일되고 표준화되면 충돌은 어느 정도 해결될 것이다

위 구성을 통일 추가 /api/

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000'
   },
  },

이렇게 구성하면 http 요청을 사용할 때 요청 앞에 api가 추가되고 상대 경로도 변경됩니다. 인터페이스 앞에 API를 추가하면 매우 번거롭습니다. 이 문제를 해결하려면 다음 방법을 사용할 수 있습니다.

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

위 코드는 실제로 가상 API 인터페이스를 제거하는 것입니다. 백엔드에 요청하면 api 접두사를 추가하지 않습니다. 따라서 프런트 엔드에서 http 요청을 할 때 프록시와 일치하도록 api 접두사를 추가해야 합니다.

logout(){
  axios.post('/api/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  axios.post('/api/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

# 🎜🎜# axios의 baseUrl을 사용하여 api를 직접 기본값으로 사용할 수 있으므로 액세스할 때마다 api 접두사가 자동으로 추가되며 각 인터페이스에 이 접두사를 수동으로 쓸 필요가 없습니다

# 🎜🎜# 항목 파일의 구성은 다음과 같습니다.

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

'api/'를 구성하면 기본적으로 로컬 도메인을 읽습니다

이렇게 구성하면 , 프로덕션 환경과 개발 환경이 구분되지 않습니다

config 폴더에 새로운 api.config.js 구성 파일을 생성합니다

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

그런 다음 main.js에 도입합니다. 프로덕션 정의와 개발 정의의 동적 일치를 보장하기 위해 접두사

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

위 구성 후에는 DOM에서 쉽게 액세스할 수 있으며 어떤 구성 요소에도 axios 모듈을 도입할 필요가 없습니다.

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

최종 코드

에이전트에서 구성됨

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

Api.config.js 구성에서 config

만들기 config 폴더의 새 api.config.js 구성 파일

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

프로덕션 및 개발 구성에 대해 잘 모릅니다

dev-server.js로 이동하여 구성 코드를 참조하세요

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ?
 require('./webpack.prod.conf') :
 require('./webpack.dev.conf')

main.js 항목 파일에서 구성

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

dom에서 API를 요청하는 자세

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

PS

: 코드 조각을 통해 vue에서 도메인 간 설정을 알아봅시다 #🎜 🎜#1. vue를 사용할 때 개발 중에 도메인 간 문제가 자주 발생합니다. 실제로 vue cli에는 도메인 간 요청을 설정할 수 있는 파일이 있습니다. 2. 도메인 간 요청을 할 수 없는 경우 프로젝트의 config 폴더 아래 index.js에서 dev:{} 부분을 수정할 수 있습니다.

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

접속해야 하는 도메인 이름으로 대상을 설정하세요.

3. 그런 다음 main.js에서 전역 속성을 설정합니다.

Vue.prototype.HOST = '/api'

4 이 시점에서 다음과 같이 이 도메인 이름을 전역적으로 사용할 수 있습니다.

var url = this.HOST + '/movie/in_theaters'
  this.$http.get(url).then(res => {
   this.movieList = res.data.subjects;
  },res => {
   console.info('调用失败');
  });

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

Vue 배경 이미지 패키징 후 잘못된 액세스 경로 문제를 해결하는 방법

#🎜 🎜#

Vue-cli ProxyTable이 개발 환경에서 도메인 간 문제를 해결하는 방법

Vue에서 발생하는 문제를 해결하는 방법 2.0은 IE11에서 빈 프로젝트 페이지를 엽니다.

위 내용은 도메인 간 라우팅 충돌을 해결하기 위한 Vue의 아이디어 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!