Assuming that the back-end interface is not ready at the time of development, we may use the mock interface (such as using YAPI), so when we use the mock interface (there are two back-end domain names at the time of development), we can solve the problem in two ways. The first is through proxy =proxy, and the second is directly through Axios.

Interfaces from the network:

Development domain: poetry. Apiopen. Top + / sentences mock domain name: http://47.110.148.106:3030/mock/11 + / search/search_record

1. Axios has request interception

Request. Js file

const baseURL = 'http://poetry.apiopen.top'
const service = axios.create({
  baseURL: baseURL,
  timeout: 100000 // request timeout
})
service.interceptors.request.use(
  config= > {
    if (config.url.indexOf('mock') > -1) {
      config.baseURL = 'http://47.110.148.106:3030/mock/11/'
      config.url = config.url.substring(6)}return config
  },
  error= > {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
Copy the code

When we request domain name development:

export function getRankList() {
  return request({
    url: '/sentences'.method: 'get'})},Copy the code

Mock domain name when:

export function getRankList() {
  return request({
    url: '/mock/search/search_record'.method: 'get'})},Copy the code

Distinguish with a /mock.

2. The proxy intercept

1. Env.development file defines the basic interface name (development interface flag):

VUE_APP_BASE_API = '/api_data'
Copy the code

Each page is available via process.env.vue_app_base_API

2 Define haseUrl in request.js

const baseURL = process.env.VUE_APP_BASE_API
const service = axios.create({
  baseURL: baseURL,
  timeout: 100000 // request timeout
})

service.interceptors.request.use(
  config= > {
    return config
  },
  error= > {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
Copy the code

3 Interception in vue.config.js

module.exports = {
  devServer: {
    host: 'localhost'.port: 8080.open: true.// The browser automatically opens when the vUE project starts
    https: false.proxy: {
      '/api_data/mock_data/': {
        target: 'http://47.110.148.106:3030/mock/11'.changeOrigin: true.pathRewrite: { '^/api_data/mock_data/': ' '}},'/api_data': {
        target: 'http://poetry.apiopen.top'.changeOrigin: true.pathRewrite: { '^/api_data': ' '},},},}}// '^/api_data' is a regular expression,
/ / to match the request in the url, transfer all 'http://poetry.apiopen.top/api_data' to http://poetry.apiopen.top
Copy the code

4 test

Schema data:

export function getRankList() {
  return request({
    url: '/mock_data/search/search_record'.method: 'get'})},Copy the code

Development data:

export function getRankList() {
  return request({
    url: '/sentences'.method: 'get'})},Copy the code

3. What’s the difference between the two methods

We use the second method, maybe you have a better method, because proxy proxy can solve the cross-domain problem, the request server interface is generally by the server to solve the cross-domain problem, request other interface, the front-end should also avoid cross-domain as far as possible!

Every time you modify vue.config.js, be sure to run it again!!

4. Reference

Vue-cli mode and environment Configure devserver. proxy

5. My official account

Recently, I have been writing some interesting stories about working in the front-end industry and life to make myself happier and pursue progress in life and work