'您可能需要一个合适的加载器来处理这种文件类型。'在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"
谢谢前进的家伙!
答
一个.vue
文件的template
部使用vue-html-loader加载,这将尝试使用require(<resource>)
(details)加载本地资源(如图片标记src
值)。
上面的错误是由于这样的事实,你没有的WebPack装载机设置处理.png
文件,要解决它,你就需要安装和配置合适的装载机 - 这样的事情,与url-loader,应工作:
{ 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');
}