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


Posted in Javascript onSeptember 21, 2017

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

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

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

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

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

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

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

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

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

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

Javascript 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 #Javascript
Node调用Java的示例代码
Sep 20 #Javascript
浅谈react前后端同构渲染
Sep 20 #Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 #Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 #Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 #Javascript
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
You might like
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
jquery 获取json数据实现代码
2009/04/27 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python之os操作方法(详解)
2017/06/15 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
人工神经网络算法知识点总结
2019/06/11 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
django连接oracle时setting 配置方法
2019/08/29 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
比赛口号霸气押韵
2015/12/24 职场文书