尝试使用我自己的 webpack 配置获取 .vue 文件中的本地图像时出错

Question

真正的问题是我正在学习 webpack 并尝试创建自己的 vue 模板但我遇到的问题在 webpack-simple 或其他模板中不会发生，而且我的图像配置与模板通常使用的配置非常相似。

{
    test: /\.(png|jpe?g|gif)$/i,
    use: {
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: './assets/',
        },
    },
}

我收到以下错误

http://localhost:8080/[object%20Module] 404 (Not Found)

当我尝试在 App.vue

中获取徽标时

<template>
    <img src="./assets/logo.png"/>
</template>

一个事实是，当我使用他的“依赖”名称或webpack给出的哈希时，图像被正确调用。

但是 vue 文档说像我一样调用必须像在 webpack-simple 模板中一样工作，因为调用将由 webpack 解析。

我不知道它是否有帮助，但我可以使用 import img from './assets/logo.png' 从路径导入 img，只需使用模板中的 HTML 我就遇到了这个问题。

Answer 1

通过此解决方法解决，只需在文件加载器中禁用 esModule

https://github.com/vuejs/vue-loader/issues/1612

尝试使用我自己的 webpack 配置获取 .vue 文件中的本地图像时出错

Error trying to get local images in .vue files with my own webpack config

html

javascript

webpack

vue.js

webpack-file-loader