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

问题背景

每个项目都需要在css中用到背景图.

vue-cli项目是自动构建生成的, 等到这个项目做通了, 再来记录整个工程目录.

自动构建后的项目, 会有两种运行方式.

npm run dev

: 这是自动提供的, 可以提供一个开发的环境, 保存, 自动热更新.

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中看到的方法.

真是感谢, 感谢.

方法具体步骤

针对此问题, 需要单独为css配置publicPath.

ExtractTextWebpackPlugin 提供了一个

options.publicPath

的API, 可以为css单独配置publicPath.

对于 vue-cli生成的项目, dist目录结构为: dist > index.html + static > css + img + js

问题是css中的background路径不能正确引入.

更改

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

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

解决思路

首先以为是图片不能引入

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

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

问了问一些大神, 没有看到任何有错的地方,

最为诡异的是

dev

可行, 我就把所有精力都放到了, 在config文件夹中 index.js 中的 build 里面的配置.

走了很多弯路.

最后确定, 这个里面没有能改的.

确定是配置项出了问题.

也是因为在

dev

中可行,

又因为添加了

<img>

标签后, 是可以读取图片的.

慢慢就确定了, 是在打包的时候, 我们用的相对路径.而在dev的时候, 用的是绝对路径.

确定问题原因

根据问题所报错, 发现寻找这个图片时候, 路径出了问题

和朋友商量后, 一致认定, 需要多加判断, 看看是否为css中的图片.

如果是的话, 就多一个判断.

因为是webpack小白, 真是尴尬. 不知道哪里改.

一通查

看了很多的解决方法,

比如说, 打包完成后再改

还有更加暴力的转成base64之类的.

最后在issue中看到了这个答案

一试便知, 真是赞.