Vue.js Vue cli生产版本不显示静态映像

我正在尝试让我们的徽标显示在vue cli生产版本中

如果我执行了vue cli服务（运行webpack dev server），图像将解析（我可以在web浏览器中看到它们）。但是，如果我提供捆绑文件（使用node或其他方式），图像将无法解析，尽管它们位于正确的文件夹中。我可以在我的网络选项卡中看到

200 OK请求http://localhost:8888/img/logo.fdcc9ca9.png

，这意味着在正确的位置可以看到名为object的正确文件。我也可以在“我的资源”选项卡中的适当位置看到它

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

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

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

---

答案是我们的API配置错误

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

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

路由。ts

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'
    }
}

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

---

您是否可以在生产时通过直接url访问图像

your domain.com/img/logo.fdcc9ca9.png

？它是否正确加载图像，或者是否有任何其他响应？啊哈，非常好的一点，它解析为index.html，这可能是我们的API配置错误。将对此进行研究。确保web服务器配置为仅将404个请求重定向到

index.html

，而不是所有请求。这将确保除web服务器无法定位的静态资产外，所有静态资产都可以访问。

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