VueJS 部署生产版本显示损坏的 png 图像

Posted 2023-02-23

【中文标题】VueJS 部署生产版本显示损坏的 png 图像

【英文标题】：VueJS deployed production build showing broken png images

【发布时间】：2020-07-06 16:16:18

【问题描述】：

我已经运行了npm run build，这会生成一个包含静态资产（例如图像）的 dist 文件夹。我在 vue 路由器上使用历史模式。

图像的 html 如下所示：

dist 文件夹如下所示：

现在部署站点后，图像已损坏：

但是，img src 是正确的：

那么这里的问题是什么？

【参考方案1】：

我将在这里冒险并猜测问题与您的路线有关，并且相对路径不适用于路线。

如果您的应用程序显示在根目录 / 上，则相对图像路径将起作用，但是因为（并且猜测）您的路由将当前路径更改为类似 /sales 的路径，因此相对路径不再起作用。

您可以通过确保使用相对路径来解决此问题。

例如，如果您使用的是 vue-cli-3 生成的项目，请检查vue.config.js 文件并确保您没有设置publicPath，因为它默认为/。

module.exports = 
  publicPath: "./", // <= this will use relative path
;

【讨论】：

我已经为图片添加了 HTML。我正在使用路线和相对图像路径，因此您的假设似乎合理。我正在使用 vue-cli-3 生成的项目。我没有设置公共路径。那么解决方案是什么？将 publicPath 设置为“./”？

我已将 publicPath 添加为“./”，但它仍然无法正常工作

尝试使用/ 而不是./

【参考方案2】：

尝试更改 index.js 中包含到目标文件夹的路径的路径，例如：dist。

作为一个 publicPath，我将 ./ 设置为 Daniel 提到的。

这对我有帮助，但我刚刚开始学习 VueJS，所以它可能不是最好的解决方案。

    const routes = [
  
    path: '/dist/',
    name: 'Home',
    component: Home
  ,
  
    path: '/dist/map',
    name: 'Map',
    component: Map
  ,
  
    path: '/dist/store',
    name: 'Store',
    component: Store
  
]