vue的打包后文件图片的加载

打包图片无法加载出来

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的之前配置都清空，才能设置新的，直接上代码。

 const imgAllLoader = config.module.rule("images");
      imgAllLoader.uses.clear();

具体看url-loader的配置

  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发给任何人了，直接打开用就行了。

1024 - awei77-前端