Vue与Webpack编译.vue文件中图片资源失败求助

我之前也碰到过一模一样的问题，折腾了好几个小时才捋清楚，给你一套一步步来的解决方案，应该能帮你搞定Webpack编译Vue单文件组件里图片资源的问题：

1. 先把Loader配置搞对（最常见的坑） #

首先确保你装了正确的依赖：

npm install file-loader url-loader --save-dev

然后根据你的项目类型调整Webpack配置：

如果你用的是原生Webpack配置（webpack.config.js） #

一定要保证vue-loader和图片资源的规则配置正确，尤其是esModule: false这个关键选项：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // 先配置.vue文件的处理规则
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
      // 图片资源处理规则
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 小于10KB的图片转成base64嵌入代码
          name: 'img/[name].[hash:7].[ext]', // 输出的图片路径和命名
          esModule: false // 必须设为false！否则Vue模板里引用图片会报错
        }
      }
    ]
  },
  plugins: [
    // 千万别忘了加这个插件，vue-loader必须依赖它
    new VueLoaderPlugin()
  ]
}

如果你用的是Vue CLI 3+（vue.config.js） #

配置更简洁，只需要修改图片规则的esModule选项：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        // 关闭ES模块语法，适配Vue的模板引用
        options.esModule = false
        return options
      })
  }
}

划重点：esModule: false是很多人忽略的点，url-loader默认用ES模块输出，而Vue模板里的图片引用是CommonJS风格，不关掉的话会出现[object Module]或者直接编译失败。

2. 检查.vue文件里的图片引用方式 #

确保你的引用写法是Webpack能解析的：

模板里直接引用 #

<template>
  <!-- 相对路径直接写 -->
  <img src="./assets/logo.png" alt="网站logo">
  <!-- 或者用require动态引入 -->
  <img :src="require('./assets/logo.png')" alt="网站logo">
</template>

在Script里导入后引用 #

<script>
// 先导入图片资源
import logoImg from './assets/logo.png'

export default {
  data() {
    return {
      logo: logoImg
    }
  }
}
</script>

<template>
  <img :src="logo" alt="网站logo">
</template>

注意：别用绝对路径（比如/assets/logo.png），除非你已经配置了正确的publicPath，否则Webpack找不到资源。

3. 排查版本兼容性问题 #

有时候是vue-loader和图片loader的版本不匹配导致的：

• Vue 2对应vue-loader ^15.x + Webpack ^4.x
• Vue 3对应vue-loader ^16.x + Webpack ^5.x
  如果不确定，可以卸载现有依赖，重新安装适配的版本：

# 以Vue 2 + Webpack 4为例
npm uninstall vue-loader file-loader url-loader
npm install vue-loader@15.9.8 file-loader@6.2.0 url-loader@4.1.1 --save-dev

4. 清理缓存再重新编译 #

Webpack的缓存有时候会搞出奇怪的问题，试试清空缓存再编译：

# 可选：如果怀疑依赖有问题，清空node_modules和锁文件
rm -rf node_modules package-lock.json
npm install
# 清理Webpack缓存
npx webpack --clean
# 用Vue CLI的话可以这么写
npm run build --no-clean

5. 针对你提到的vue-loader报错 #

你说报错开头是ERROR in ./node_modules/vue-loa...，大概率是没配置VueLoaderPlugin，或者webpack里没正确处理.vue文件的规则。一定要确保在webpack配置的plugins数组里添加new VueLoaderPlugin()，这个是vue-loader正常工作的必要条件。

按照上面的步骤一步步排查，应该能解决你的问题。我当时就是因为漏了esModule: false卡了好久，这个坑真的很容易踩。

内容的提问来源于stack exchange，提问作者ecntrys