使用 v-bind:href require() 时，Vue3 组件不会在生产环境中呈现

Question

开发时一切正常，但一旦我导出生产 1 组件就不会呈现，而是被替换为

经过一些调试，我发现这是因为require()

我的图片带有动态 URL，如下所示：

:src="require(`@/assets/path/${variable}`)"

这在开发中有效，但一旦我构建用于生产的应用程序，组件就不会呈现。

当我把路径替换成

src="@/assets/path/file.png"

组件出现并正常工作

我可以在 vue.config.js 中提供给 webpack 的东西吗？

有没有办法在没有 require() 的情况下在路径中使用变量？

Answer 1

v-bind里面的表达式在运行时执行，webpack在编译时别名。

将 require() 从 html 模板移至 data()，它应该可以在生产中使用。

简单示例：

<template>
<img :src="getImg" />
</template>

<script>
export default {
    name: 'Example',
    data() {
        return {
            file: 'image',
        }
    },
    methods: {
        getImg() {
            return require(`@/assets/images/${this.file}.png`)
        },
    },
}
</script>

使用 v-bind:href require() 时，Vue3 组件不会在生产环境中呈现

Vue3 Component doesn't render in production when using v-bind:href require()

webpack

vue.js

vue-component

vuejs3

vue-composition-api