Question

在我的Home.vue组件[<img class="img-fluid" src="../images/logoWhite.png">]中添加了图片标记后，当我尝试在我的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的devDependencies：

"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"

先谢谢你们！

Answer 1

使用vue-html-loader加载template文件的.vue部分，该部分将尝试使用{{1}加载本地资源（例如图像标记src值） }}（details）。

上述错误是由于您没有设置webpack加载程序来处理require(<resource>)文件，修复它您需要安装和配置合适的加载程序 - 像这样，使用url-loader，应该可以工作：

.png

Answer 2

我遇到了同样的问题，我的解决方案是使用'file-loader'

安装：

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');
}

'你可能需要一个合适的加载器来处理这个文件类型。在Vue.js项目中

2 个答案: