关于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

最好都保持一致，前后端统一请求/api/share。省去不必要的约定麻烦。

Answer 2

让后台用nginx反向代理之类的代理一下/api就行了 不用一个个修改

Answer 3

在开发环境中用proxy做代理转发，在服务器端一样可以做类似的工作，可以让你们后端同学配合啊。比如我有个node项目，在服务器端也配置了proxyTable

Answer 4

这看你用什么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的方式或其它方式跨域很麻烦，建议让后端直接允许跨域。

Answer 5

你这些需要在项目设计阶段就要考虑的,现在调整只能是前后端同一用一种啦,比如/api/share等...

Answer 6

写个函数，判断访问的地址，如果是本地的，调用/api/share，如果是远程服务器的，调用/share