Vue.js项目构建后public目录图片无法显示问题求助

问题分析 #

开发环境正常但生产部署后图片加载失败，核心原因是绝对路径的适配问题：开发时本地服务器根目录就是项目根，/images/能直接指向public/images；但生产部署如果不在服务器根目录（比如子路径），这个绝对路径会指向服务器根而非项目部署路径，导致404。另外资源体积警告是因为图片未优化，不影响加载但需要处理。

解决方案 #

1. 配置正确的publicPath #

在项目根目录的vue.config.js（没有就新建）中设置publicPath，适配部署环境：

module.exports = {
  // 生产环境部署路径，若部署在根目录则用'/'，子目录则改为'/your-subpath/'
  publicPath: process.env.NODE_ENV === 'production' ? '/your-deploy-directory/' : '/'
}

2. 用process.env.BASE_URL拼接资源路径 #

修改计算属性，用Vue自动注入的环境变量替代硬编码的绝对路径，确保开发/生产环境路径一致：

computed: {
  locomotion_image() {
    return `${process.env.BASE_URL}images/Locomotion_${this.image}.jpg`;
  }
}

process.env.BASE_URL会自动匹配publicPath的配置，不管部署在根目录还是子路径，都能正确指向dist/images下的资源。

3. 解决资源体积超限警告 #

安装图片压缩插件优化图片体积，比如vue-cli-plugin-image-compression：

vue add image-compression

或者手动用工具压缩图片后再放入public/images，避免构建时体积超限。

验证 #

重新执行npm run build，将dist目录部署到服务器后，检查图片路径是否正确（可在浏览器控制台查看网络请求路径），确认资源能正常加载。

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