我正在尝试让我们的徽标出现在vue-cli的产品中。
如果我执行vue-cli-service serve
(运行webpack开发服务器),则图像会解析(我可以在网络浏览器中看到它们)。但是,如果我提供捆绑文件(使用节点或其他方式),则尽管它们位于正确的文件夹中,但图像仍无法解析。我可以在网络标签中看到对http://localhost:8888/img/logo.fdcc9ca9.png
的200 OK请求,这意味着可以在正确的位置看到正确的文件命名对象。我也可以在“源”选项卡中的适当位置看到它。
此外,如果我检查该元素,则它看起来像这样,看起来也很正确:
<img data-v-0242e324="" src="/img/logo.fdcc9ca9.png" alt="logo">
尽管如此,在生产构建中,该图像显示了类HTML“残破的图像”缩略图。
出了什么问题?如何在生产版本中不显示“残破的图像”缩略图?为什么它可以在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
答案 0 :(得分: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}`);
});