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

Posted 2023-02-22

【中文标题】Vue-cli 生产版本不显示静态图像

【英文标题】：Vue-cli production build not displaying static images

【发布时间】：2019-03-28 06:21:34

【问题描述】：

我正在尝试让我们的徽标出现在 vue-cli 生产版本中。

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

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

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

尽管如此，在生产构建中，图像显示类 html“损坏的图像”缩略图。

怎么了？如何在生产版本中不显示“损坏的图像”缩略图？为什么它在 webpack-dev-server 上工作而不是生产？

Logo.vue

<template>
  <img src="../img/logo.png" >
</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

【问题讨论】：

您可以在生产中通过直接 url 访问图像吗？ your-domain.com/img/logo.fdcc9ca9.png?它是否正确加载图像或有任何其他响应？

啊哈，很好，它解析为我们的 index.html，这可能是我们 API 的错误配置。将对此进行调查。

确保 Web 服务器配置为仅将 404 个请求重定向到 index.html，而不是所有请求。这将确保所有静态资源都可以访问，除了那些无法被 Web 服务器定位的资源。

【参考方案1】：

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

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

没有我们的代码，这无济于事，但将以下内容添加到我们的路由处理中解决了这个问题：

routes.ts

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