Vue3组件生产环境使用v-bind:href结合require()时无法渲染问题排查与解决方案咨询

首先得搞清楚为啥开发环境正常，生产就挂了：webpack在生产构建时会对静态资源做哈希重命名，并且只会打包它能提前扫描到的资源。你用require(@/assets/path/${variable})这种动态路径写法时，webpack没法在打包阶段确定所有可能的图片文件名，所以会漏掉这些资源，导致生产环境找不到图片，组件自然就渲染失败被注释替代了。

下面给你两种解决思路，一种是调整webpack配置适配原有的require写法，另一种是不用require的替代方案：

一、通过vue.config.js配置webpack适配动态require #

最可靠的方式是让webpack明确知道要打包哪些目录下的图片，你可以用require.context预加载目标目录的所有图片，然后在组件里动态引用：

步骤1：在组件中预加载图片 #

<template>
  <img :src="getImageUrl(variable)" alt="动态图片">
</template>

<script>
export default {
  data() {
    return {
      variable: 'file1' // 你的动态变量
    }
  },
  methods: {
    getImageUrl(filename) {
      // 预加载@/assets/path下所有png/jpg/gif图片，false表示不递归子目录
      const imageContext = require.context('@/assets/path', false, /\.(png|jpe?g|gif)$/)
      // 返回对应图片的路径，注意要加./前缀
      return imageContext(`./${filename}.png`)
    }
  }
}
</script>

步骤2：（可选）vue.config.js中确保图片规则正确 #

如果上面的方法还是有问题，可以在vue.config.js里显式配置webpack对图片的处理规则，确保目标目录被包含：

const path = require('path')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          include: [path.resolve(__dirname, 'src/assets/path')],
          type: 'asset/resource' // webpack 5的资源类型，替代原来的url-loader/file-loader
        }
      ]
    }
  }
}

这样webpack会在打包时扫描src/assets/path下的所有图片，不管是静态还是动态引用的，都会被正确打包并生成哈希路径。

二、不使用require的替代方案 #

如果你不想用require，可以把图片放到Vue项目的public目录下（这个目录里的资源不会被webpack处理，会直接复制到dist根目录），然后用绝对路径拼接变量：

示例代码 #

<template>
  <!-- 注意路径开头的/，对应public目录的根 -->
  <img :src="`/assets/path/${variable}.png`" alt="动态图片">
</template>

<script>
export default {
  data() {
    return {
      variable: 'file1'
    }
  }
}
</script>

注意事项 #

• 图片要放在public/assets/path目录下，和你拼接的路径对应
• 这种方式的缺点是图片不会被webpack优化（比如自动压缩、哈希命名），适合对资源体积要求不高的场景
• 如果你的项目部署在子路径下（比如https://example.com/my-app/），需要在vue.config.js里配置publicPath: '/my-app/'，确保路径正确

另外，如果你用的是Vue 3 + Vue CLI 5（webpack 5），还可以用import.meta.glob来动态导入图片，写法更现代：

<script setup>
import { computed } from 'vue'
const variable = 'file1'

// 预加载所有图片，eager: true表示立即导入
const images = import.meta.glob('@/assets/path/*.png', { eager: true })
const imageUrl = computed(() => images[`@/assets/path/${variable}.png`]?.default)
</script>

<template>
  <img :src="imageUrl" alt="动态图片">
</template>

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