'您可能需要一個合適的加載器來處理這種文件類型。'在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項目

回答

相關問題