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

Question

问题背景

前端一个api

/api/share

在开发阶段的时候我用proxyTable进行了代理向后端发送请求

所有/api的请求，比如/api/share被代理到http://localhost:8000/share

proxyTable: {

      '/api': {

        target: 'http://localhost:8000/',

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''

        }

      }

后端通过

/share接受到请求并进行处理

问题：

然后现在要把前端后端联合起来，用npm run build把文件给后端，

那么这个api接口应该怎么调整？

我需要把前端所有原本是/api/share的接口这部分代码，都改成/share，来和后端保持一致么？

接口太多了，想问有没有能够统一修改接口的方法，把前端发往/api/share的请求，实际上都发给/share？最好能开发阶段和生产阶段一套代码就可以了，不用来回修改接口了

Answer 1

这看你用什么ajax框架，一般异步请求框架都是有请求、响应拦截器的，将请求拦截下来修改替换地址前缀就行了。不过如果是vue的话一般都用的axiosimport 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的方式或其它方式跨域很麻烦，建议让后端直接允许跨域。