'；您可能需要适当的加载程序来处理此文件类型；在Vue.js项目中

在我的Home.vue组件[

]中添加了图像标记后，我尝试在我的vue.js项目中运行“gulp”时遇到以下错误：

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ModuleParseError: Module parse failed: G:\Projects\Cakes\src\images\logoWhite.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

我了解到这个错误可能是由babel以及它在webpack.config.js中的配置引起的。在尝试了列出的一些解决方案之后，我仍然没有成功地让它工作。我还尝试创建一个带有babel预设条件的“.babelrc”文件，但仍然不起作用

这是“webpack.config.js”文件的外观：

var webpack = require('webpack')

module.exports =  {
  entry: [
    './src/main.js'
  ],
  output: {
    path: "/dist/js",
    publicPath: "/dist/",
    filename: "app.js"
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\//,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  resolve: {
    modulesDirectories: ['node_modules']
  }
}

在package.json中，我有以下包作为我对babel的依赖：

"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.13.2",
"babel-runtime": "^6.3.13"

---

提前谢谢各位

使用加载

.vue

文件的

模板

部分，它将尝试使用

require（）

（）加载本地资源（例如图像标签

src

值）

上述错误是由于您没有用于处理

.png

文件的网页包加载程序设置，要解决此问题，您需要安装并配置合适的加载程序-类似于此的程序，使用，应该可以工作：

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

---

我也有同样的问题，我的解决方案是使用“文件加载器”

安装：

npm install --save-dev file-loader

将模块规则添加到webpack.config.js

{ test: /\.(png|jpg|gif)$/, loader: 'file-loader?name=./images/[name].[ext]' }

CSS文件：

.content {
    background-image: url('./images/background.jpg');
}