Vue中v-bind:src自动拼接localhost前缀如何替换为指定域名

出现该问题是因为你使用的是相对路径/uploads/image.png，浏览器解析相对路径时会自动拼接当前页面的域名端口，本地开发时Vue devServer默认跑在8000端口，所以自动拼接出了localhost:8000/uploads/image.png，而你的静态资源实际存放在后端1337端口/指定的线上域名下。

你可以选择以下任意一种方案解决：

方案1：前端统一拼接资源前缀（兼容性最高，不需要改后端和配置） #

封装全局工具函数处理所有服务端返回的资源路径，开发和生产环境自动匹配对应的域名：

// 全局封装工具函数，可放在utils目录下全局引入
const getFullAssetPath = (relativePath) => {
  const baseDomain = process.env.NODE_ENV === 'production' 
    ? 'https://你需要的正式域名' // 替换为你线上要用的域名
    : 'http://localhost:1337'
  return baseDomain + relativePath
}

// 调用示例，拿到服务端返回的路径后加工再使用
const imgUrl = getFullAssetPath('/uploads/image.png')

方案2：调整Vue配置，开发环境代理资源请求+生产环境配置公共路径 #

修改vue.config.js配置，让开发环境的uploads资源请求自动转发到后端服务，同时配置生产环境的公共路径：

const path = require('path')

module.exports = {
    outputDir: path.resolve(__dirname, './dist'),
    // 生产环境公共路径，打包时会自动给所有静态资源拼接该前缀
    publicPath: process.env.NODE_ENV === 'production' ? 'https://你需要的正式域名/' : '/',
    devServer: {
        proxy : {
            // 接口请求代理
            '/api': {
                target: 'http://localhost:1337',
                changeOrigin: true
            },
            // 上传资源请求代理
            '/uploads': {
                target: 'http://localhost:1337',
                changeOrigin: true
            }
        }
    }
}

注意：如果选择方案2，生产环境部署时需要保证/uploads路径的资源和前端页面部署在同一个域名下，或者将uploads目录托管到对应配置的域名下。

内容的提问来源于stack exchange，提问作者Даксин