一、关于npm run build 打包时img图片不加载的问题
在config 文件夹下的 index.js中修改配置
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',//将原来的'/'修改为'./'
}
关于是否将图片转成base64格式的设置,相关配置 在build文件夹下的 webpack.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 1024,//单位为b 1024实际大小为1kb 超过1kb的图片将不进行base64转换
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
二、关于引入外部字体库和img图片的相关配置
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../; 注意配置这一部分,根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
加上 publicPath: '../../', 配置后重写打包即可。
网友评论