问题描述:vue项目打包后,文件找得到,但是背景图片找不到;
解决方法:
主要是需要单独为 css 配置 publicPath
。
ExtractTextWebpackPlugin
提供了一个 options.publicPath
的 api,可以为css单独配置 publicPath
。
vue
下的src部分目录结构如下:
src 源码目录
├── main.js 入口js文件
├── app.vue 根组件
├── images 自己建的放图片的文件夹
├── pages
│ └── login
│ └── login.vue 在这个组件中使用 images文件中的图片丢失
├── routes
│ └── index.js
...
经常遇见的问题是 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)
}
网友评论