如何让 webpack 从 Vue 中“跳过”图像源编译？答案

【问题标题】：How can I make webpack "skip" the image source compilation from Vue?如何让 webpack 从 Vue 中“跳过”图像源编译？
【发布时间】：2018-01-09 15:07:42
【问题描述】：

我的 Vuejs 组件中有一个图像属性：

<img src="./photos/image.png">

我希望 webpack 捆绑整个 .js 而不是图像。

然后，当 HTML 从我的服务器运行时：

将调用 vuejs 脚本
将创建 img src="./photos/image.png" 元素
源将被服务器读取并出现图像。

有没有办法做到这一点？

我在使用 webpack 时遇到错误，因为它试图获取图像。

【问题讨论】：

标签： webpack vuejs2

【解决方案1】：

您可能想使用url-loader 而不是file-loader / raw-loader。

在这里查看圣经：https://webpack.js.org/loaders/url-loader/

【讨论】：

【解决方案2】：

抱歉，如果问题不清楚。

我最终通过将图像源放入 Vue 的计算组件中解决了这个问题。

vue 中的元素：

<img :src="imagePath">

计算属性：

computed: {
    imagePath: function(){ return 'photos/image.png' }
}

这种方式 webpack 不会尝试捆绑它，因为 imagePath 仅由 Vue 在运行时呈现。

【讨论】：