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 class“broken image”缩略图。

出了什么问题？我如何在生产构建中不显示“broken image”缩略图？为什么它在webpack-dev-server上可以工作但在生产环境中不行？ Logo.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'
    }
}

package.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

- Caleb Jay

---

你能在生产环境中通过直接URL访问图片吗？例如 your-domain.com/img/logo.fdcc9ca9.png？它是否正确加载图片或者有其他响应？ - aBiscuit

啊哈，非常好的观点，它解析到我们的index.html，这可能是我们API的错误配置。我会调查一下。 - Caleb Jay

确保Web服务器仅将404请求重定向到“index.html”，而不是所有请求。这将确保所有静态资源都可以访问，除了Web服务器无法找到的那些资源。 - aBiscuit

Answer 1

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

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

没有我们的代码，这并不有用，但将以下内容添加到我们的路由处理程序中解决了这个问题：

routes.ts

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

- Caleb Jay