打包后图片的加载问题

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

  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 格式的数据再引入。