解决vue-cli webpack打包后加载资源的路径问题


Posted in Javascript onSeptember 25, 2018

vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。

1.一个是css,js,ico等文件加载不到,是目录里少了dist

打开页面时一片空白

解决vue-cli webpack打包后加载资源的路径问题

解决办法:

config/index.js文件的build->assetsPublicPath的默认值改为 './'

assetsPublicPath:资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用'./'

解决vue-cli webpack打包后加载资源的路径问题

2.另一个就是单纯的在背景图使用相对路径导致加载不到图片

例如登录页面的背景图设置

解决vue-cli webpack打包后加载资源的路径问题

我的目录结构是这样的,

解决vue-cli webpack打包后加载资源的路径问题

页的时候没发使用@/../static 只能使用../../../static

这个时候,打包过后的登陆页面引用图片路径错误,多了一个/static/css

解决办法:

build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"

publicPath:重写该加载器(loader) css 的 publicPath 的设置

解决vue-cli webpack打包后加载资源的路径问题

以上这篇解决vue-cli webpack打包后加载资源的路径问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
xml和web特殊字符
Apr 28 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JS中的BOM应用
Feb 02 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 #Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 #Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 #Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 #Javascript
Vue高版本中一些新特性的使用详解
Sep 25 #Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 #Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python调用支付宝支付接口流程
2019/08/15 Python
python框架flask表单实现详解
2019/11/04 Python
Tensorflow累加的实现案例
2020/02/05 Python
彻底解决Python包下载慢问题
2020/11/15 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
加工操作管理制度
2014/01/19 职场文书
九年级数学教学反思
2014/02/02 职场文书
财务部经理岗位职责
2014/02/03 职场文书
初二生物教学反思
2014/02/03 职场文书
党建示范点实施方案
2014/03/12 职场文书
贺卡寄语大全
2014/04/11 职场文书
部门年终奖分配方案
2014/05/07 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
大学生创业计划书
2014/08/14 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
家属答谢词
2015/01/05 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年司法局工作总结
2015/05/22 职场文书
汽车销售员工作总结
2015/08/12 职场文书
禁毒主题班会教案
2015/08/14 职场文书