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

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

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

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

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

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

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

赞 (0)

相关推荐

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

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • 关于vue.js发布后路径引用的问题解决

    关于vue.js发布后路径引用的问题解决

    本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定. 如果你也遇到这样

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

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

    写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品

  • 解决GO编译时避免引入外部动态库的问题

    目录 简介 gopacket是如何构建的? 演示demo 准备静态库 指定编译参数 简介 最近碰到一个问题,有一个流量采集的组件中使用到了github.com/google/gopacket 这个库,这个库使用一切正常,但是唯独有一个缺点,编译后的二进制文件依赖于libpcap.so的动态库.这为安装包兼容多个平台造成了一定的困扰,于是便想着如何把libpcap这个外部依赖已静态库的方式在go程序编译的同时link进可执行程序. gopacket是如何构建的? 此处先截取一小片源码(github

  • 解决vue中使用Axios调用接口时出现的ie数据处理问题

    1.问题 近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久. 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据.却发现在处理返回来的数据的时候处理的有点问题,怎么搞就是不行. 2.处理过程及方法 我使用了console大法去解决这个问题,具体是这样的:我先将服务器返回过来的数据打印到浏览器控制台,结果发现都能打印出来,这个时候就郁闷了,明明有数据为何在IE上还是

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • 解决vue 单文件组件中样式加载问题

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

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

    webpack 编译es6 动态引入 import() 时不能传入变量,例如dir ='path/to/my/file.js' : import(dir) , 而要传入字符串 import('path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态. 但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack:例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,

  • 解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案: 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的

  • 解决vue侦听器watch,调用this时出现undefined的问题

    watch侦听器中,我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined,这里错误的原因是不能写成箭头函数.写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为: watch: { value: function(newV, oldV) { this.a = newV; } } 如下图: 看考链接:https://cn.vuejs.org/v2/api/#wa

  • Android中使用Theme来解决启动app时出现的空白屏问题

    相信大多数人一开始都会对启动app的时候出现先白瓶或者黑屏然后才进入第一个界面,例如:SplashActivity.那这是什么原因造成的呢? <style name="Splash_Theme" parent="@android:style/Theme.NoTitleBar"> </style> 原因是我们给改Activity/Application设置的主题引起的,因为该主题相对应的windowBackground等背景被设置成了白色或者黑

随机推荐