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

 更新时间:2018年09月03日 09:09:38   作者:shuhaha  
今天小编就为大家分享一篇解决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文件中背景图片的路径问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js中的图片引用路径的方式

    Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式,感兴趣的朋友一起看看吧
    2017-07-07
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue2.0 解决抽取公用js的问题

    vue2.0 解决抽取公用js的问题

    这篇文章主要介绍了vue2.0 解决抽取公用js的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 快速了解vue-cli 3.0 新特性

    快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下
    2018-02-02
  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    这篇文章主要介绍了推荐VSCode 上特别好用的 Vue 插件之vetur,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 总结4个方面优化Vue项目

    总结4个方面优化Vue项目

    在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,对此有需要的朋友们学习下天。
    2019-02-02
  • NUXT SSR初级入门笔记(小结)

    NUXT SSR初级入门笔记(小结)

    这篇文章主要介绍了NUXT SSR初级入门笔记(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue中利用mqtt服务端实现即时通讯的步骤记录

    vue中利用mqtt服务端实现即时通讯的步骤记录

    前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,所以下面这篇文章主要给大家介绍了关于vue中如何利用mqtt服务端实现即时通讯的相关资料,需要的朋友可以参考下
    2021-07-07
  • vue项目打包后怎样优雅的解决跨域

    vue项目打包后怎样优雅的解决跨域

    这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 这15个Vue指令,让你的项目开发爽到爆

    这15个Vue指令,让你的项目开发爽到爆

    这篇文章主要介绍了这15个Vue指令,让你的项目开发爽到爆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-10-10

最新评论