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

我收到的时候我试图运行在我vue.js工程“一饮而尽”下面的错误后，我已经在我的Home.vue成分[<img class="img-fluid" src="../images/logoWhite.png">]添加图像标签：'您可能需要一个合适的加载器来处理这种文件类型。'在Vue.js项目

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，我有以下的包作为我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"

谢谢前进的家伙！

来源

2016-08-20 Tiberiu Oprea

一个.vue文件的template部使用vue-html-loader加载，这将尝试使用require(<resource>)（details）加载本地资源（如图片标记src值）。

上面的错误是由于这样的事实，你没有的WebPack装载机设置处理.png文件，要解决它，你就需要安装和配置合适的装载机 - 这样的事情，与url-loader，应工作：

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

来源

2016-08-25 13:27:42

我有同样的问题，我的解决方案是使用 '文件加载'

安装：

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

来源

2017-06-06 23:25:54 einaralex

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

回答

相关问题