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

我已经运行了

npm run build

，这将生成一个包含静态资产（如图像）的dist文件夹。我正在vue路由器上使用历史记录模式

以下是图像的HTML格式：

以下是dist文件夹的外观：

现在，在部署站点后，映像将被破坏：

但是，img src是正确的：

---

那么这里的问题是什么呢？

我将在这里冒险，猜测问题与您的路由有关，并且相对路径与路由不起作用

如果您的应用程序显示在根目录

/

上，则相对图像路径将起作用，但由于（据猜测）您的路径将当前路径更改为类似

/sales

，因此相对路径不再起作用

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

例如，如果您使用的是vue-cli-3生成的项目，请检查

vue.config.js

文件，并确保未设置

publicPath

，因为它默认为

/

module.exports={
publicPath:“./”，//我将在这里讨论一个问题，并猜测问题与您的路由有关，并且相对路径与路由不起作用

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

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

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

module.exports={
publicPath:“../”，//尝试更改index.js中包含到目标文件夹的路由的路径，例如：dist

作为公共路径，我设置了Daniel提到的
/

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

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

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

作为公共路径，我设置了Daniel提到的
/

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

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

我已经为图像添加了HTML。我正在使用路由和相对图像路径，因此您的假设似乎是正确的。我正在使用vue-cli-3生成的项目。我没有设置公共路径。那么解决方案是什么？要将公共路径设置为“/”，我已将公共路径添加为“/”但是它仍然不起作用尝试使用
/
而不是
/
我为图像添加了HTML。我使用的是路由和相对图像路径，因此您的假设似乎是正确的。我使用的是vue-cli-3生成的项目。我没有设置公共路径。那么解决方案是什么？将公共路径设置为“/”？我已将publicPath添加为“/”，但它仍然不工作尝试使用
/
而不是
/