vue.js - “您可能需要一个合适的加载器来处理这种文件类型。”在 Vue.js 项目中

Question

当我在我的 Home.vue 组件中添加图像标签后尝试在我的 vue.js 项目中运行“gulp”时出现以下错误 [ <img class="img-fluid" src="../images/logoWhite.png"> ]:

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

我有同样的问题，我的解决方案是使用'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');
}