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)
    }
  }

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

解决思路

首先以为是图片不能引入

• 因为在 'npm run dev' 中可以使用, 所以可以排除这种错误.

认为是自己的某一个配置项出了问题

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

确定是配置项出了问题.

• 也是因为在dev中可行,
• 又因为添加了<img>标签后, 是可以读取图片的.
• 慢慢就确定了, 是在打包的时候, 我们用的相对路径.而在dev的时候, 用的是绝对路径.

确定问题原因

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

一通查

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