打包后图片的加载问题

发表于 更新于 分类于 ，

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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 设置为 './'
    这个配置修改，只有在打包的时候才修改，开发的时候需要改回来

    1
    2
    3
    4
    5
    6
    dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {},
    ...

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