Vue3在构建后在img上得到404，但在服务上工作答案

【问题标题】：Vue3 gets 404 on img after build, but works on serveVue3在构建后在img上得到404，但在服务上工作
【发布时间】：2021-04-15 07:27:15
【问题描述】：

我发现了一些相关问题，但没有一个对我有用。它适用于服务脚本，但不适用于构建脚本。我的徽标图像得到 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 上也是如此。

有什么想法吗？非常感谢您的提示。

【问题讨论】：

不是mylogo.dbc82912.png文件的名称吗？
我很确定，Vue 是怎么做到的。所以很遗憾没有。
只有第二次尝试才能奏效。（第一个需要绑定和require，第三个有错误的变量名。）组件的位置是什么？
对不起，错误的变量名是为了简化这里。是 App.vue 中的一个 logo
#3 中变量名还是错误的。您在模板中将其命名为 mylogo。显示的组件的路径是什么（在哪个目录中）？

标签： vuejs3

【解决方案1】：

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

Deploy VueJS App in a subdirectory

和

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

解决办法是

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

【讨论】：