打包后图片的加载问题
开发模式下,图片加载是没有问题的,但是打包后图片就无法加载了,需要更改打包配置。
修改 build 目录下的 utils.js,添加
publicPath: '../../'
1
2
3
4
5
6
7
8
9if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: "../../",
fallback: "vue-style-loader",
});
} else {
return ["vue-style-loader"].concat(loaders);
}修改 config 目录下的 index.js, 将 assetsPublicPath 设置为
'./'
这个配置修改,只有在打包的时候才修改,开发的时候需要改回来1
2
3
4
5
6dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {},
...
注意:index.html 中引入的图片是无法加载的,解决办法可以把 index.html 中引入的图片转成 base_64 格式的数据再引入。