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)
}
}
解决思路
首先以为是图片不能引入
- 因为在 'npm run dev' 中可以使用, 所以可以排除这种错误.
认为是自己的某一个配置项出了问题
- 问了问一些大神, 没有看到任何有错的地方,
- 最为诡异的是
dev可行, 我就把所有精力都放到了, 在config文件夹中 index.js 中的 build 里面的配置. - 走了很多弯路.
- 最后确定, 这个里面没有能改的.
确定是配置项出了问题.
- 也是因为在
dev中可行, - 又因为添加了
<img>标签后, 是可以读取图片的. - 慢慢就确定了, 是在打包的时候, 我们用的相对路径.而在dev的时候, 用的是绝对路径.
确定问题原因
- 根据问题所报错, 发现寻找这个图片时候, 路径出了问题
- 和朋友商量后, 一致认定, 需要多加判断, 看看是否为css中的图片.
- 如果是的话, 就多一个判断.
- 因为是webpack小白, 真是尴尬. 不知道哪里改.
一通查
- 看了很多的解决方法,
- 比如说, 打包完成后再改
- 还有更加暴力的转成base64之类的.
- 最后在issue中看到了这个答案
- 一试便知, 真是赞.
