Vue-cli 生产版本不显示静态图像

Question

我试图让我们的标志出现在 vue-cli 生产版本中。

如果我执行vue-cli-service serve(运行 webpack 开发服务器(，图像会解析(我可以在 Web 浏览器中看到它们(。但是，如果我提供捆绑的文件(使用 node 或其他方式(，图像不会解析，尽管它们位于正确的文件夹中。我可以在我的网络选项卡中看到 200 OK 请求http://localhost:8888/img/logo.fdcc9ca9.png，这意味着在正确的位置看到了正确的文件名对象。我也可以在我的来源选项卡中看到它。

另外，如果我检查元素，它看起来像这样，看起来也很正确：

<img data-v-0242e324="" src="/img/logo.fdcc9ca9.png" alt="logo">

尽管如此，在生产版本中，图像显示类 HTML"损坏的图像"缩略图。

出了什么问题？如何在生产版本中不显示"损坏的图像"缩略图？为什么它在 webpack-dev-server 上工作而不是生产服务器？

徽标.vue

<template>
<img src="../img/logo.png" alt="logo">
</template>
<script>
...
</script>

vue.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'client/src'));
config
.plugin('provide')
.use(webpack.ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}]);
config.plugin("html")
.tap(args => {
args[0].template = "./client/index.html"
return args
})
},
runtimeCompiler: true,
devServer: {
proxy: 'http://localhost:8888'
}
}

包.json

...
"serve:ui": "vue-cli-service serve client/src/main.js",
"build:ui": "vue-cli-service build --dest build/public/ client/src/main.js",
...

文件夹结构， 开发

client/
src/
img/
logo.png
components/
Logo.vue

文件夹结构，输出构建

build/
public/
css/
fonts/
img/
logo.fcdd9ca9.png
js/
index.html

Answer 1

答案是我们的API配置错误。

简而言之，没有图像(或字体(的处理程序。正如@aBiscuit指出的那样，直接在我的浏览器中尝试请求我的图像 URL 返回索引.html，这是我们的 API 对它不理解的堆栈文件请求的回退。

如果没有我们的代码，这没有帮助，但是将以下内容添加到我们的路由处理中解决了这个问题：

路线.ts

router.get('/img/:file', async (ctx, next) => {
await next();
await send(ctx, `build/public/img/${ctx.params.file}`);
});