1、背景：正常情况下打包后的页面都是基于在网站根目录下运行，原则上不会出现这种情况，但如果项目放在网站的二级目录或本地运行（官方不建议本地运行项目，可能涉及到网络请求的问题）
2、基于项目在二级目录下运行，即打开时需要输入http://xxx.xxx.xxx/xxx，而不是直接http://xxx.xxx.xxx这种
3、二级目录下打包后的项目要能正常运行，需要在config/index.js中
build:{
....
assetsPublicPath: '/'
....
} |
修改成：assetsPublicPath: ‘./’
4、问题来了，因为是相对路径，所以在css中写的url是相对当前这个css文件的，所以打包后的背景图片url如果为static/img/xxx.jpg，结果解析出来的路径是xxxxx/static/css/static/img/xxx.jpg，图片当然无法正常显示了;
5、也许有些人会发现，为什么有些图片是正常的？好像并不是都不行啊，注意了，那些没有问题的图片看下路径是不是加载的base64格式？！
6、在webpack.base.conf.js中会有这么一段
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}, |
这里的意思是说，小于10K的图片资源会在打包时直接转成base64，你可以把这个值放大，大于你的背景图，这样也可以解决
7、还有另外一个办法，在build/utils.js文件中找到下面这一段
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} |
修改成：
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} |
只是加了一行publicPath: ‘../../’，这样一来样式文件会相对于根目录加载，这种方式也是有局限性的，为什么可以写两个../就行了呢？因为我们的img与css都是放在static目录下的二级目录，所以两个../刚好到static同级，如果不是则会出错的哦，注意就行！