初学者关于webpack url-loader关于图片加载的求助
发布于 3个月前 作者 yetianyue 840 次浏览 来自 问答

我正在学习 webpack跟vue结合,正在做Vue.js实战书中第十章使用webpack的Demo。

下面是报错的信息,意思好像是文件类型不正确。

main.js:sourcemap:10463 [Vue warn]: Error in render: "Error: Module parse failed: E:\code\vue\book\demo\img\2.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)"

found in

---> <App> at app.vue
       <Root>
warn @ main.js:sourcemap:10463
logError @ main.js:sourcemap:11598
globalHandleError @ main.js:sourcemap:11593
handleError @ main.js:sourcemap:11582
Vue._render @ main.js:sourcemap:14361
updateComponent @ main.js:sourcemap:12650
get @ main.js:sourcemap:13000
Watcher @ main.js:sourcemap:12989
mountComponent @ main.js:sourcemap:12657
Vue$3.$mount @ main.js:sourcemap:17780
init @ main.js:sourcemap:13950
createComponent @ main.js:sourcemap:15397
createElm @ main.js:sourcemap:15345
patch @ main.js:sourcemap:15919
Vue._update @ main.js:sourcemap:12522
updateComponent @ main.js:sourcemap:12650
get @ main.js:sourcemap:13000
Watcher @ main.js:sourcemap:12989
mountComponent @ main.js:sourcemap:12657
Vue$3.$mount @ main.js:sourcemap:17780
Vue._init @ main.js:sourcemap:14455
Vue$3 @ main.js:sourcemap:14544
Object.defineProperty.value @ main.js:sourcemap:9877
__webpack_require__ @ main.js:sourcemap:20
(anonymous) @ main.js:sourcemap:998
__webpack_require__ @ main.js:sourcemap:20
(anonymous) @ main.js:sourcemap:63
(anonymous) @ main.js:sourcemap:66
main.js:sourcemap:11602 Error: Module parse failed: E:\code\vue\book\demo\img\2.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at Object.<anonymous> (main.js:sourcemap:18511)
    at __webpack_require__ (main.js:sourcemap:20)
    at Proxy.staticRenderFns (main.js:sourcemap:18493)
    at Proxy.renderStatic (main.js:sourcemap:13734)
    at Proxy.render (main.js:sourcemap:18483)
    at VueComponent.Vue._render (main.js:sourcemap:14359)
    at VueComponent.updateComponent (main.js:sourcemap:12650)
    at Watcher.get (main.js:sourcemap:13000)
    at new Watcher (main.js:sourcemap:12989)
    at mountComponent (main.js:sourcemap:12657)
logError @ main.js:sourcemap:11602
globalHandleError @ main.js:sourcemap:11593
handleError @ main.js:sourcemap:11582
Vue._render @ main.js:sourcemap:14361
updateComponent @ main.js:sourcemap:12650
get @ main.js:sourcemap:13000
Watcher @ main.js:sourcemap:12989
mountComponent @ main.js:sourcemap:12657
Vue$3.$mount @ main.js:sourcemap:17780
init @ main.js:sourcemap:13950
createComponent @ main.js:sourcemap:15397
createElm @ main.js:sourcemap:15345
patch @ main.js:sourcemap:15919
Vue._update @ main.js:sourcemap:12522
updateComponent @ main.js:sourcemap:12650
get @ main.js:sourcemap:13000
Watcher @ main.js:sourcemap:12989
mountComponent @ main.js:sourcemap:12657
Vue$3.$mount @ main.js:sourcemap:17780
Vue._init @ main.js:sourcemap:14455
Vue$3 @ main.js:sourcemap:14544
Object.defineProperty.value @ main.js:sourcemap:9877
__webpack_require__ @ main.js:sourcemap:20
(anonymous) @ main.js:sourcemap:998
__webpack_require__ @ main.js:sourcemap:20
(anonymous) @ main.js:sourcemap:63
(anonymous) @ main.js:sourcemap:66
main.js:sourcemap:17790 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
main.js:sourcemap:17800 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
main.js:1166 [WDS] Errors while compiling. Reload prevented.
errors @ main.js:1166
onmessage @ main.js:3113
EventTarget.dispatchEvent @ main.js:3293
(anonymous) @ main.js:4006
SockJS._transportMessage @ main.js:4004
EventEmitter.emit @ main.js:3209
WebSocketTransport.ws.onmessage @ main.js:6080
main.js:1172 ./img/2.jpg
Module parse failed: E:\code\vue\book\demo\img\2.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/_vue-loader@14.2.1@vue-loader/lib/template-compiler?{"id":"data-v-381730fa","hasScoped":true,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/_vue-loader@14.2.1@vue-loader/lib/selector.js?type=template&index=0!./app.vue 27:46-68
 @ ./app.vue
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 ./main
errors @ main.js:1172
onmessage @ main.js:3113
EventTarget.dispatchEvent @ main.js:3293
(anonymous) @ main.js:4006
SockJS._transportMessage @ main.js:4004
EventEmitter.emit @ main.js:3209
WebSocketTransport.ws.onmessage @ main.js:6080

我的package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.2",
    "url-loader": "^1.0.1",
    "vue-hot-reload-api": "^2.3.0",
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.1.0"
  },
  "dependencies": {
    "vue": "^2.5.13"
  }
}

app.vue文件中包含图片,就是加载不出来

<template>
    <div>
        Hello {{name}}
        <v-title title="Vue 组件"></v-title>
        <v-button @click="handlerClick" color="red">点击按钮</v-button>
        <p>
            <img src="./img/2.jpg" />
        </p>
    </div>
</template>

<script>
    import vTitle from './title.vue';
    import vButton from './buttion.vue';
    export default {
        components:{
            vTitle:vTitle,
            vButton:vButton
        },
        data: function(){
            return {
                name : 'vue.js'
            }
        },
        methods:{
            handlerClick (e) {
                console.log(e);
            }
        }
    }
</script>
<style scoped>
    div{
        color:#f60;
        font-size:50px;
    }
</style>

webpack.config.js

var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    //入口
    entry:{
        main:'./main'
    },
    //出口
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    //module对象中rule可以加载一些列的loader是,每个loader包含test,use。
    //test 匹配 import或者require中包含规则的文件,use通过style-loader转化
    module:{
        rules:[
            // {
            //  test:/\.css$/,
            //  use:[
            //      'style-loader',
            //      'css-loader'
            //  ]
            // },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                //编译使用es6的代码
                query:{
                    presets:["es2015"],
                    plugins:["transform-runtime"],
                    comments:false
                }
            },
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            },
            {
                test:/\.vue$/,
                loader:'vue-loader',
                options:{
                    loader:{
                        css:ExtractTextPlugin.extract({
                            use:'css-loader',
                            fallback:'vue-style-loader'
                        })
                    }
                }
            },
            {
                test:'/\.(gif|jpg|jpeg|png|woff|svg|eot|ttf)\??.*$/',
                loader:'url-loader?limit=1024',
                // use:[
                //  'file-loader'
                // ]
            }
        ]
    },
    plugins:[
        //重命名后提取后的css文件
        new ExtractTextPlugin('main.css')
    ]
}
module.exports = config; 

请帮帮我,谢谢!

1 回复

水平有限,这样看不出什么来,要不给个源码的下载地址,我本地跑一下看看

回到顶部