解决Vue编译时写在style中的路径问题

 更新时间:2017年09月21日 08:32:49   作者:CLtomoya  
下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片。

通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题。

要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径

另外一个修改就是上图了,添加,publicPath: '../../'这一行,这是配置extract-text-plugin插件的提取样式,具体是什么我也不清楚。

问题说完了,希望对大家有帮助,写下来也是方便自己日后出现问题可以查看。谢谢!

以上这篇解决Vue编译时写在style中的路径问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中数据不响应的问题及解决

    vue中数据不响应的问题及解决

    这篇文章主要介绍了vue中数据不响应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 解决vue的router组件component在import时不能使用变量问题

    解决vue的router组件component在import时不能使用变量问题

    这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3 去除 vue warn 及生产环境去除console.log的方法

    Vue3 去除 vue warn 及生产环境去除console.log的方法

    这篇文章主要介绍了Vue3 去除 vue warn 及生产环境去除console.log的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 详解Vue中如何避免滥用watch

    详解Vue中如何避免滥用watch

    这篇文章主要为大家详细介绍了Vue中滥用watch带来的问题以及如何解决,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 前端vue实现的h5页面接入微信支付流程(jsapi方式)

    前端vue实现的h5页面接入微信支付流程(jsapi方式)

    vue实现微信支付有三种方式,第一种方式是PC端支付,第二种方式是H5支付,第三种方式是微信公众号支付,这篇文章主要给大家介绍了关于前端vue实现的h5页面接入微信支付流程,文中介绍的方法是利用jsapi方式,通过代码将实现的方法介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue 实现模糊检索并根据其他字符的首字母顺序排列

    vue 实现模糊检索并根据其他字符的首字母顺序排列

    这篇文章主要介绍了vue 实现模糊检索,并根据其他字符的首字母顺序排列,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue 关闭浏览器窗口的时候,清空localStorage的数据示例

    vue 关闭浏览器窗口的时候,清空localStorage的数据示例

    今天小编就为大家分享一篇vue 关闭浏览器窗口的时候,清空localStorage的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue使用electron转换项目成桌面应用方法介绍

    Vue使用electron转换项目成桌面应用方法介绍

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue中Echarts图表宽度没占满的问题

    vue中Echarts图表宽度没占满的问题

    这篇文章主要介绍了vue中Echarts图表宽度没占满的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue组件间通信全面讲解

    vue组件间通信全面讲解

    这篇文章主要介绍了vue组件间通信全面讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论