报错信息:ERROR in ./src/img/timg.jpg Module build failed: Error: Cannot find module 'file-loader' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.loader (E:\hbuildWork\learnVue\02-webpack的起步\node_modules\_url-loader@2.1.0@url-loader\dist\index.js:65 :20) @ ./node_modules/_css-loader@3.2.0@css-loader/dist/cjs.js!./src/css/common.css 4:38-64 @ ./src/css/common.css @ ./src/main.js
原因:检查一下项目中(webpack.config.js)是否引用了url-loader

如果有,则需看项目中加载图片的大小是否在属性limit范围中,一般都是因为太小了。
解决方案:cnpm install --save-dev file-loader
cnpm run build,此时不会报错,但是页面还是未加载图片,是因为打包后的图片路径少了前缀,页面找不到。
在webpack.config.js中的output下加入publicPath:‘dist/’
module.exports={
entry:'./src/main.js',
output :{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath:'dist/'
}
}

本文介绍了在使用webpack构建Vue项目时遇到的图片处理报错,问题源于url-loader的limit配置。解决方案包括安装file-loader,调整webpack配置,特别是output.publicPath设置为'dist/',以确保打包后图片路径正确。
最低0.47元/天 解锁文章
2390

被折叠的 条评论
为什么被折叠?



