Vue组件嵌入SVG输出[object Module]问题求助

问题描述 #

尝试在Vue组件中嵌入SVG，最终HTML输出始终显示[object Module]而非预期的SVG内容，未使用Mix，仅使用Webpack，相关代码如下：

相关代码 #

package.json #

...
"devDependencies":{
    "html-loader": "^4.2.0",
    ....
}

components/SvgIcon.vue #

<!-- components/SvgIcon.vue -->
<template>
    <div v-html="require(`!html-loader!@svg/${icon}.svg`)"></div>
</template>

<script>
export default {
    props: ['icon']
}
</script>

components/button.vue #

<!-- components/button.vue -->
<template>
    ...
    <svg-icon icon="myicon"></svg-icon> <!-- 最终输出显示为[object Module] -->
    ...
</template>
<script>
import SvgIcon from './SvgIcon.vue';
Vue.component('svg-icon', SvgIcon)
...
</script>

webpack.config.js #

// webpack.config.js
const { dirname } = require("path");
const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }]
            },
            ...
        ]
    },
    resolve: {
        alias: {
            "@svg": path.resolve(__dirname, "svg"),
        }
    },
    ...
}

问题原因 #

html-loader从v4版本开始，默认启用ES模块语法（导出格式为export default 内容）。直接将require()的结果传给v-html时，得到的是一个模块对象而非SVG字符串，因此页面显示[object Module]。

解决方案 #

方案1：修改html-loader配置，关闭ES模块输出 #

在webpack.config.js的html-loader选项中添加esModule: false，让loader输出CommonJS格式的模块：

{
    test: /\.svg$/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: true,
            esModule: false // 新增该配置
        }
    }]
}

同时，SvgIcon.vue中可以去掉require里的!html-loader!前缀（因为webpack已全局配置svg使用html-loader）：

<template>
    <div v-html="require(`@svg/${icon}.svg`)"></div>
</template>

方案2：保留ES模块语法，获取模块的default导出 #

如果不想修改webpack配置，可在SvgIcon.vue中通过.default获取SVG字符串内容：

<template>
    <div v-html="svgContent"></div>
</template>

<script>
export default {
    props: ['icon'],
    computed: {
        svgContent() {
            return require(`!html-loader!@svg/${this.icon}.svg`).default;
        }
    }
}
</script>

推荐方案1，更符合webpack全局配置的规范，无需在组件中重复指定loader。

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