解决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 相关文章推荐
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
javascript RegExp 使用说明
May 21 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
Vue父子组件传值的一些坑
Sep 16 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
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
composer.lock文件的作用
2016/02/03 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
PyQt5响应回车事件的方法
2019/06/25 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python 写一个水果忍者游戏
2021/01/13 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
医学求职自荐信
2014/06/21 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python