Vue3 在构建后在 img 上获得 404，但在服务上工作

Question

我发现了一些相关问题，但其中 none 对我有用。它适用于服务脚本，但不适用于构建脚本。我的徽标图像收到 404，但奇怪的是它适用于背景图像。

我的图片在/src/assets/mylogo.png

下

我想在 /src/App.vue

中使用它

出于某种原因，Vue 将路径解析为 /img/mylogo.dbc82912.png 而不是 /domain/subdirectory/vue-app/dist/img/background.fa7a8b55.png

我尝试了我发现的所有可能性：

<!-- 1. approach -->
<a href="https://mypage">
  <img
    :src="require('@/assets/mylogo.png')"
    alt="Official logo"
    style="max-width: 40px; width: 100%; height: auto"
  />
</a>

我也试过了

<!-- 2. approach -->
<a href="https://mypage">
  <img
    src="./assets/mylogo.png"
    alt="Official logo"
    style="max-width: 40px; width: 100%; height: auto"
  />
</a>

和

<!-- 3. approach -->
<img
  :src=mylogo
  alt="Official logo"
  style="max-width: 40px; width: 100%; height: auto"
/>
[...]
data() {
  return {
    mylogo: require("@/assets/mylogo.png"),
  };
},

我使用 @vue/cli 4.5.8 和 "vue": "^3.0.0" 以及 Firefox 84.0.1 (64-bit)，但在 Chrome 上也是如此。

有什么想法吗？我将不胜感激。

Answer 1

这花了我很多时间，但我学到了一些新东西。原来 vue-cli 不高兴，该项目被嵌入到一个更大的项目中。所以感谢

和

https://cli.vuejs.org/config/#publicpath

解决方案是

// vue.config.js placed in root
module.exports = {
  publicPath: "./",
};

Vue3 在构建后在 img 上获得 404，但在服务上工作

Vue3 gets 404 on img after build, but works on serve

vuejs3