問題描述:vue項(xiàng)目打包后,文件找得到,但是背景圖片找不到;
解決方法:
主要是需要單獨(dú)為 css 配置 publicPath。
ExtractTextWebpackPlugin提供了一個 options.publicPath 的 api,可以為css單獨(dú)配置 publicPath。
vue下的src部分目錄結(jié)構(gòu)如下:
src 源碼目錄
├── main.js 入口js文件
├── app.vue 根組件
├── images 自己建的放圖片的文件夾
├── pages
│ └── login
│ └── login.vue 在這個組件中使用 images文件中的圖片丟失
├── routes
│ └── index.js
...
經(jīng)常遇見的問題是 css 中 background-image 的相對路徑不能正確的引用到 img 文件夾中
更改 build/utils.js 文件中 ExtractTextPlugin插件的options 配置:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //加上這一條就好了
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}