Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题

问题背景

• 每一个项目都须要在css中用到背景图.
• vue-cli项目是自动构建生成的, 等到这个项目作通了, 再来记录整个工程目录.
• 自动构建后的项目, 会有两种运行方式.
  1. npm run dev: 这是自动提供的, 能够提供一个开发的环境, 保存, 自动热更新.
  2. npm run build: 这是咱们的构建项目, 构建成一个可以运行的项目
• 构建后项目中全部的代码都会被打包处理. 全部的代码都会结合到一块儿, 这时候的路径就全靠咱们的本身提早配置的了.

问题描述

• 构建后的项目, 都须要读取静态资源.
• 静态资源分为三种, JS, CSS, IMG.
• 由于咱们须要生成到一个cordova项目中, 打包安卓. 故咱们所有采用了相对路径.
• 须要引入的资源只有三种, JS, CSS 和图片. 图片分为 <img src=""> 中引入的图片, 和 background-image: url() 中引入的图片.
• 在img中的图片是彻底正确的, 这时候, 咱们css中的图片怎么都找不到.
• 问题最尴尬的是: 在npm run dev的时候一切正常
• 附上 错误截图,

解决方法

一共找到了两种种解决方法: 我直接用了第二种

第二种解决方法截图:

• 改变了一配置项, 也就是向上走两层, 刚恰好符合个人要求
• 由于是css中的图片, 因此在路径编程变成了去css这个文件夹中寻找static再去寻找img文件夹.
• 尴尬到不行...
• 在gihub的issue中看到的方法.
• 真是感谢, 感谢.

方法具体步骤

1. 针对此问题, 须要单独为css配置publicPath.
2. ExtractTextWebpackPlugin 提供了一个options.publicPath的API, 能够为css单独配置publicPath.
3. 对于 vue-cli生成的项目, dist目录结构为: dist > index.html + static > css + img + js
4. 问题是css中的background路径不能正确引入.
5. 更改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)
    }
  }

1. 附上extract-text-webpack-plugin 的文档

解决思路

首先觉得是图片不能引入

• 由于在 'npm run dev' 中可使用, 因此能够排除这种错误.

认为是本身的某一个配置项出了问题

• 问了问一些大神, 没有看到任何有错的地方,
• 最为诡异的是 dev可行, 我就把全部精力都放到了, 在config文件夹中 index.js 中的 build 里面的配置.
• 走了不少弯路.
• 最后肯定, 这个里面没有能改的.

肯定是配置项出了问题.

• 也是由于在dev中可行,
• 又由于添加了<img>标签后, 是能够读取图片的.
• 慢慢就肯定了, 是在打包的时候, 咱们用的相对路径.而在dev的时候, 用的是绝对路径.

肯定问题缘由

• 根据问题所报错, 发现寻找这个图片时候, 路径出了问题
• 和朋友商量后, 一致认定, 须要多加判断, 看看是否为css中的图片.
• 若是是的话, 就多一个判断.
• 由于是webpack小白, 真是尴尬. 不知道哪里改.

一通查

• 看了不少的解决方法,
• 好比说, 打包完成后再改
• 还有更加暴力的转成base64之类的.
• 最后在issue中看到了这个答案
• 一试便知, 真是赞.