如何配置vite.config.js实现Express后端图片在Vue3前端正常显示？

问题原因分析 #

• Vite代理配置语法错误：你配置的/images/*不符合Vite Proxy的匹配规则，带*的写法会导致代理规则不生效，图片请求依然走前端的5173端口。
• 相对路径解析逻辑：后端返回的product.imageUrl是相对路径（如/images/basil-bottle.webp），浏览器会默认以当前页面域名（localhost:5173）为基础拼接URL，导致请求打到前端端口。

解决方案 #

方案一：修正Vite代理配置 #

修改vite.config.js中的代理规则，将/images/*改为/images并添加changeOrigin: true，确保代理规则生效：

export default defineConfig({
  server: {
    origin: 'http://localhost:8000',
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
      // 修正后的图片代理规则
      '/images': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
  // 其余配置保持不变
})

修改后重启Vite服务，所有/images开头的请求会被自动代理到后端8000端口，浏览器显示的localhost:5173/images/xxx请求实际会转发到后端，返回正常图片资源。

方案二：后端返回完整图片URL #

在后端接口中直接返回包含后端域名的完整图片路径，让前端直接请求后端端口：

app.get('/api/products', async (req, res) => {
    const products = await db.collection('products').find({}).toArray();
    // 为每个商品的imageUrl拼接后端域名
    const formattedProducts = products.map(product => ({
        ...product,
        imageUrl: `http://localhost:8000${product.imageUrl}`
    }));
    res.json(formattedProducts);
})

方案三：前端统一拼接图片前缀 #

如果不想修改后端或代理配置，可在组件中手动为图片路径添加后端地址前缀：

<template>
    <div class="grid-wrap">
        <div class="product-item" v-for="product in result" :key="product.id">
            <img :src="`http://localhost:8000${product.imageUrl}`" alt="bottle images"/>
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-price">{{ product.price }}</p>
            <RouterLink :to="`details/${product.id}`">
                <button> View details </button>
            </RouterLink>
        </div>
    </div>
</template>

验证方式 #

修改后打开浏览器开发者工具的Network面板，查看图片请求状态：

• 方案一：请求地址显示localhost:5173/images/xxx，但实际返回200状态码；
• 方案二/三：请求地址直接显示localhost:8000/images/xxx，返回200状态码。

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