关于vue把前端项目结合到后端过程中的小问题

Question

问题背景前端一个api/api/share在开发阶段的时候我用proxyTable进行了代理向后端发送请求所有/api的请求，比如/api/share被代理到http://localhost:8000/shareproxyTable: {      '/api': {        target: 'http://localhost:8000/',        changeOrigin: true,        pathRewrite: {          '^/api': ''        }      }后端通过/share接受到请求并进行处理问题：然后现在要把前端后端联合起来，用npm run build把文件给后端，那么这个api接口应该怎么调整？我需要把前端所有原本是/api/share的接口这部分代码，都改成/share，来和后端保持一致么？接口太多了，想问有没有能够统一修改接口的方法，把前端发往/api/share的请求，实际上都发给/share？最好能开发阶段和生产阶段一套代码就可以了，不用来回修改接口了

Answer 1

这看你用什么ajax框架，一般异步请求框架都是有请求、响应拦截器的，将请求拦截下来修改替换地址前缀就行了。不过如果是vue的话一般都用的axios

import axios from 'axios'

let env = 0 //0，正式环境，1，开发环境，2，测试环境

let releaseBaseUrl = '/share'

let devBaseUrl = '/api/share'

let baseUrl= releaseBaseUrl 

export const htp = axios.create({

    baseURL: baseUrl,

    timeout: 10000,

    headers: {"Content-Type": "application/x-www-form-urlencoded"},

    withCredentials: true

})

htp.interceptors.request.use(req => {

    return handleRequest(req)

}, error => {

    return Promise.reject(error)

})

const  handleRequest = req => {

    

    console.log('befor convert', req )

    if(0 === env){

        req.baseURL = releaseBaseUrl 

    }else if(1 === env){

        req.baseURL = devBaseUrl 

    }

    console.log('after convert', req)

    return req

}

题外话：前端开发也是有规范的，可能你也需要参考后端的mvc模式来开发，或许你至少得有个baseURL吧，然后用一个service层来给前端view层提供数据支持，尽量不要把url直接写在view层中，不然修改可能会很麻烦，再说一点题外话，真心觉得用proxy的方式或其它方式跨域很麻烦，建议让后端直接允许跨域。