Vue打包后,css引入的图片等资源找不到路径的问题
Vue在npm run dev的时候,图片背景图等正常显示,npm run build后,报错,提示图片找不到。原因: npm run dev时候,加载资源是绝对路径, npm run build时候,加载资源是相对路径,且文件目录已改变。 默认情况下为: index.html static | --img | --图片.jpg
·
Vue 在npm run dev 的时候,图片背景等正常显示,npm run build后,报错,提示图片找不到。
static
| --img
| --图片.jpg
| --css
| --app.css
| --js
})
} else {
return ['vue-style-loader'].concat(loaders)
}
原因: npm run dev 时候,加载资源是绝对路径,
npm run build 时候,加载资源是相对路径,且文件目录已改变。默认情况下为:
static
| --img
| --图片.jpg
| --css
| --app.css
| --js
| --app.js
打包后,不管原先的图片资源在哪里,路径通通变成static/img/xxxx ,若在HTML里的IMG标签的src引入图片,则正常显示,因为路径是从 index.html 开始寻找的,所以static/img/xxxx是能正确访问到图片。
但是在css/app.css里,在当前的CSS目录下,无 static/img 路径,所以资源找不到。
解决办法:
打开build / utils.js,在绿色位置加入 publicPath:'../../' ,(如果自己更改了打包时候的路径,请自行匹配)该设置会把css所有引入的资源的路径变成 ../../static/img/ ,这样就能找到资源了。
如下:
if( options.extract){
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../ ../'})
} else {
return ['vue-style-loader'].concat(loaders)
}
更多推荐
已为社区贡献3条内容
所有评论(0)