Vue项目中如何简便访问API基地址拼接图片资源链接？

首先明确：不要尝试用Vue Router做图片请求重定向，Vue Router只负责单页应用的页面路由跳转，img标签触发的静态资源请求是浏览器直接发出的，根本不会走Vue Router的规则，这个思路走不通。

下面两个都是生产环境验证过的方案，比你现在每次手动拼接路径简洁很多：

方案1：封装全局图片地址工具（改动最小，适配所有部署场景） #

你现在每次重复导入环境变量、重复拼接固定的/images前缀属于完全冗余的重复代码，只需要在项目入口封装一次全局方法，所有组件直接调用即可，不用重复导入变量：

// src/main.js
const API_BASE = import.meta.env.VITE_API_BASE_URL
// 封装图片地址生成方法，固定路径前缀内置，只需要传图片文件名/相对路径
const getImgPath = (imgPath) => `${API_BASE}/images/${imgPath}`

// Vue3 挂载到全局属性
app.config.globalProperties.$img = getImgPath

组件内使用时不需要任何导入，直接调用即可：

<template>
  <!-- 静态图片 -->
  <img :src="$img('whatever.jpg')" />
  <!-- 动态头像这类可变路径 -->
  <img :src="$img(userInfo.avatar)" />
</template>

如果你用<script setup>语法，觉得拿全局属性麻烦，也可以把这个方法抽成单独的composable，配合自动导入插件可以做到零导入直接用。

方案2：代理转发（代码最整洁，零业务侵入） #

这个方案是长期维护项目的首选，业务代码里完全不需要感知API服务的域名，所有图片路径直接写相对路径即可，域名和转发逻辑全交给构建工具和服务端配置处理：

1. 开发环境在vite.config.js里配置代理，把所有图片请求转发到API服务：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/images': {
        target: import.meta.env.VITE_API_BASE_URL,
        changeOrigin: true,
        // 如果你的API端图片路径不是根路径下的/images，就开rewrite调整前缀
        // rewrite: (path) => path.replace(/^\/images/, '/static/upload/images')
      }
    }
  }
})

2. 生产环境在Nginx配置里加一条转发规则，把/images开头的请求统一转发到API服务：

location /images/ {
  proxy_pass http://你的API服务内网地址/images/;
}

配置完成后，业务代码里连全局方法都不用调用，直接写相对路径就行：

<template>
  <img src="/images/whatever.jpg" />
  <img :src="`/images/${userInfo.avatar}`" />
</template>

这个方案后续如果API服务域名换了、图片存储路径改了，只需要调整代理配置和Nginx规则，业务代码一行都不用改，维护成本极低。

两个方案按需选就行，快速迭代的小项目选方案1改动最快，长期迭代的中大型项目优先选方案2。

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