美文网首页
vue打包后图片消失的问题

vue打包后图片消失的问题

作者: 短鼻子匹诺曹 | 来源:发表于2019-05-17 16:32 被阅读0次

    问题描述: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)
    }
    

    这样再npm run build就没问题了 ♥

    相关文章

      网友评论

          本文标题:vue打包后图片消失的问题

          本文链接:https://www.haomeiwen.com/subject/myuoaqtx.html