집 >웹 프론트엔드 >JS 튜토리얼 >vue가 도메인 간 라우팅 충돌을 해결하는 방법에 대해

vue가 도메인 간 라우팅 충돌을 해결하는 방법에 대해

小云云원래의: 2017-12-28 10:35:251631검색

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 경로도 For Goods라는 이름으로 지정되어 있으며 이때 충돌이 발생합니다.

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

올바른 자세

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

위 구성을 앞에 /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/'를 구성하면 기본적으로 로컬 도메인을 읽습니다

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

In config

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

폴더에 새로운 api.config.js 구성 파일을 생성한 후 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':'/'
    }
   },
  },

config에서 api.config.js 구성

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('调用失败');
  });

vue가 도메인 간 라우팅 충돌을 해결하는 방법에 대해

관련 기사