在Vue 组件打包后标签 ‘ img src=“./assets/logo.png“ ’在前台页面的路径下显示 src=[object Module]?

组件中的原始代码：

打包后出现：

解决方案：在配置 file-loader 的时候，设置 options 中的 esModule:false 就可以了。示例代码如下：

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

原理解析：因为url-loader默认导出esm，而@vue/component-compiler-utils按照commonjs解析。打包后，可以查找bundle.js中关于这个图片的模块，会发现它被包裹在一个模块中，这个模块导出的是module.exports=“export default xxxxxx” ，所以最后会是一个对象。

注意：1. 路径问题：要改成一个相对路径的形式，把 ./ 去掉，那么它的意思就是一个纯的字符串，同时要考虑这个网站根目录的相对路径，而不是开发中的相对目录。
2. 在url-loader中用的就是file-loader，所以在这两个loader中更改都可以。