vue-cli中解决css引用图片打包后找不到文件资源的问题

1.在CSS中引入图片

#slider1 {background-image: url(./bg02.jpg);background-size: cover;
}

注意：此处的图片与索引文件在同一个目录下;

在开发环境下背景图片是可以好好的显示的，但是打包后提示找不到资源，报错：

解决的方法有两种：暴力的和柔和的

（1）开始使用暴力的方法，在配置文件（webpack.base.conf.js）中设置限制参数

{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 4192,name: utils.assetsPath('img/[name].[ext]')}},

极限参数，代表如果图片小于大约4K则会自动帮你压缩成BASE64编码的图片，否则拷贝文件到生产目录，这里如果将限制值设置很大的话，页面上所有的图片都会压缩成BASE64的图片，这样的话就不会涉及到路径的问题，当然这种暴力的方法会给浏览器带来很大的压力。

（2）现在说说柔和的方法，稍微查一下原因就应该知道，CSS引入图片再打包后，风格装载机无法设置自己的publicPath，所以只要改变风格装载机中的publicPath即可，一行代码即可以搞定，

找到建/ util.js中文件中ExtractTextPlugin的CSS路径，手动添加publicPath参数，

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath: '../../',fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}

重新bulid一下就OK了，我比较喜欢第二种方法，比较方便。

vue-cli中解决css引用图片打包后找不到文件资源的问题相关推荐

vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决
前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.很全面的. Vue是 ...
vue js中解决二进制转图片显示问题
一:问题工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: ...
vue css引用图片编译后路径出错
背景描述: scss中背景图片引用路径是这样: 编译后的文件目录是这样: 现在config index.js的build路径配置是这样: 问题描述: css 和js文件的编译路径都是正确的,/stat ...
vue background-image路径下的图片打包后找不到的问题
参考 https://segmentfault.com/q/1010000009700735 的解决办法.
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
Vue CLI 環境設定與打包
Vue CLI (Vue.js Command-Line Interface) Vue CLI 是由 Vue.js 核心團隊所開發,用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊的一套指令 ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...

vue-cli中解决css引用图片打包后找不到文件资源的问题

vue-cli中解决css引用图片打包后找不到文件资源的问题相关推荐

最新文章

热门文章