打包图片无法加载出来
ok,这里我先咨询了下chatgpt,然而......... 我只能说没有用
这里是我的代码配置,我只能说这里基本没什么问题
我引入本地文件的路径
ok,这里大家会感觉很nice,不会出现问题,当我build后............
error
上面的情况相信大家遇见都会很懵逼,配置好的,状态码也是200,路径也是对的,为啥图片加载不出来呢。
开始解决问题
首先由我们配置的url-loader说起,由于我们使用的是vuecli脚手架,内置的loader已经配置好了,我们只需要用就行,或者在vue.config.js中配置自己想要的配置,大佬也可以配置自己的脚手架,当然例如vuecli的loader有很多,例如less-loader,scss....,file-loader,vue-style-loader,vue-loader,babel-loader........很多很多,好那回到我们说的url-loader,相信大家一定对这个loader很陌生,废话不多说直接上链接v4.webpack.js.org/loaders/url...
这里webpack的文档说的很清楚我也就不多说了,我直接说哪里有问题吧,vuecli的内部已经配置了url-loader,我上面是有进行了配置,所以出现了问题,还有一个关键的问题,直接看配置
这个esModule大家应该知道吧,就是import和export,es6语法,ok他这个配置属性是默认为true的,上面我用的是require,是什么语法?大佬直接秒懂,commonjs,所以我们这里需要把这个esModule设置为false。
等等还没完,我们还需把vuecli的之前配置都清空,才能设置新的,直接上代码。
js
const imgAllLoader = config.module.rule("images");
imgAllLoader.uses.clear();
具体看url-loader的配置
js
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
exclude: /node_modules/,
type: "javascript/auto",
use: [
{
loader: "url-loader",
options: {
esModule: false, // 不转换esm规范
name: "img/[name].[hash:3].[ext]",
limit: 1024 * 10,//文件大小限制
fallback: "file-loader", // 大于limit时,会使用file-loader也可以指定loader处理,默认值就是file-loader
},
},
],
},
],
},
ok,在我们build后,来看看效果图,很完美。
这样就可以直接把dist发给任何人了,直接打开用就行了。