当项目需要放到服务器子目录时候,会遇到这个图片打包问题,
处理方法有两个:#A和#B
#A 给所有资源配置相对路径'/'.
A-1,找到 config->index.js里面，如下修改
//举个栗子,当前服务器路径/访问路径是 127.0.0.1/wap/other/index.html
//打包资源路径都用相对路径'/' ,这样就可以解决了.
index: path.resolve(__dirname, '../wap/other/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../wap/other'),
assetsSubDirectory: 'static',
assetsPublicPath: '/wap/other/',
A-1的作用如下:
image.png
#B 给所有资源对应配置路径'../../'和'./',
B-1,找到 config->index.js里面，如下修改
//这里让页面上打包成的css/js和img标签src的路径都带上 ./ ,但会影响到css背景图路径,所以需要第二步配置
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
B-2,找到 build->utils.js里面，如下修改
if (options.extract) {
return ExtractTextPlugin.extract({
publicPath: '../../', //增加这一句.作用于css背景图background
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
B-1和B-2的作用如下:
image.png
至此,ok了么?
再补充了个注意点
不要用给webpack.base.conf.js添加publicPath: '../../'的方法,因为会同时作用于img和css路径,从而出现问题
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// publicPath: '../../', //这里不能加,不然会导致img和背景图background都引入前缀,从而img路径失效
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
--by Affandi ⊙▽⊙