打包后图片的加载问题

本文最后更新于:2023年12月5日 晚上

开发模式下,图片加载是没有问题的,但是打包后图片就无法加载了,需要更改打包配置。

  1. 修改 build 目录下的 utils.js,添加 publicPath: '../../'

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: "../../",
        fallback: "vue-style-loader",
      });
    } else {
      return ["vue-style-loader"].concat(loaders);
    }
  2. 修改 config 目录下的 index.js, 将 assetsPublicPath 设置为 './'
    这个配置修改,只有在打包的时候才修改,开发的时候需要改回来

    dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {},
    ...

注意:index.html 中引入的图片是无法加载的,解决办法可以把 index.html 中引入的图片转成 base_64 格式的数据再引入。


打包后图片的加载问题
http://blog.lujinkai.cn/前端/Vue2/打包后图片的加载问题/
作者
像方便面一样的男子
发布于
2020年12月7日
更新于
2023年12月5日
许可协议