Vue项目与后端同域部署如何动态调用当前域名下API无需硬编码

方法1：直接使用根路径相对地址（最适配你的场景） #

你完全不需要写死域名，直接把API请求写成根路径开头的相对路径即可：
fetch("/api/myFunction")

• 原理：浏览器会自动使用当前页面的协议、域名、端口作为前缀拼接请求地址，比如当前页面访问https://example.com，请求会自动发往https://example.com/api/myFunction，如果后续迁移到https://myapp.com，请求前缀会自动跟随替换，无需修改任何业务代码。

本地开发兼容配置 #

本地开发时前端跑在localhost，后端在其他地址会触发跨域，你可以在Vue CLI 3的vue.config.js中配置开发代理，保持本地和生产环境的请求写法完全一致：

// 项目根目录的vue.config.js，没有的话手动新建
module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以/api开头的请求
      '/api': {
        target: 'https://www.example.com', // 本地开发时的后端地址
        changeOrigin: true, // 开启跨域
        // 如果需要去掉路径前缀可以加pathRewrite，不需要就删掉
        // pathRewrite: {'^/api' : ''}
      }
    }
  }
}

配置后重启开发服务，本地的/api/xxx请求会自动代理到后端地址，不需要修改任何请求代码。

特殊场景适配（部署在子路径下） #

如果你的Vue应用后续不是部署在域名根路径，而是子路径比如https://example.com/myapp/，可以使用Vue CLI自动注入的process.env.BASE_URL变量拼接地址：
fetch(${process.env.BASE_URL}api/myFunction)
你只需要在vue.config.js中配置对应publicPath即可，变量会自动跟随环境变更：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/'
}

进阶优化建议 #

建议你把请求逻辑封装成统一的工具函数，不用在每个业务页面手写前缀，后续调整更方便：

// src/utils/request.js
const basePrefix = process.env.BASE_URL
export default function request(url, options = {}) {
  return fetch(`${basePrefix}${url.replace(/^\//, '')}`, options)
}

// 业务页面使用
import request from '@/utils/request'
request('/api/myFunction').then(res => { /* 处理逻辑 */ })

内容的提问来源于stack exchange，提问作者Caliph Hamid