解决vue打包css文件中背景图片的路径问题

vue-cli写完的静态页面我们在node环境中引入没有问题，但是打包后放在Apache环境下，路径却有问题了

如一个简单css语句

.welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat;

但是打包后路径成了却出现404访问不到的问题。

解决的办法很简单

build路径下utils.js文件

// Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader',
  publicPath:'../../'   //添加此代码！！！
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }

以上这篇解决vue打包css文件中背景图片的路径问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue打包后访问静态资源路径问题

    Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现 图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件 把最后的'/' 改为 './' 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点,感谢大家的阅读和对我们的支持.

  • Vue.js中轻松解决v-for执行出错的三个方案

    Vue.js中轻松解决v-for执行出错的三个方案

    前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示

  • 解决vue v-for src 图片路径问题 404

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • 解决vue打包css文件中背景图片的路径问题

    vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题. 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is speci

  • 解决Vue打包之后文件路径出错的问题

    这里以vue-cli创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个

  • 使用PHP下载CSS文件中的图片的代码

    共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //note 匹配出需要下载的URL地址 preg_match_all("/url\((.*)\)/", $styleFileContent, $imagesURLArray);

  • 使用PHP实现下载CSS文件中的图片

    作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验.我相信每个做web的程序员也都会有类似的经历. 在扒皮过程中,必不可少的需要下载样式文件中的图片.碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合适的了. < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Documentation:

  • 用php实现的下载css文件中的图片的代码

    作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验.我相信每个做web的程序员也都会有类似的经历. 在扒皮过程中,必不可少的需要下载样式文件中的图片.碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合适的了. 复制代码 代码如下: < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Doc

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • 解决vue打包之后静态资源图片失效的问题

    1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同

  • 解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • 解决vue打包后vendor.js文件过大问题

    第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js

随机推荐