详解vue静态资源打包中的坑与解决方案


Posted in Javascript onFebruary 05, 2018

本文主要解决

①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题;

②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。

1、问题

vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如:

//ip:port/public/springActivity/

此时访问:

http://ip:port/public/springActivity/index.html

index.html 可以正常访问,但是引用的js,css等文件服务器响应均为404,查看引入的资源路径如下:

http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
http://ip:port/static/js/app.815851e87b083afb82bf.js

2、分析

由上可以看出是资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。

3、解决

在打包时需要使用相对路径来处理静态资源,更改build中资源发布路径配置(config/index.js, build对象):

将 assetsPublicPath: '/'  改为  assetsPublicPath: './',
再次打包,并将资源部署到特定路径下,然后访问:

此时index.html可以正常访问,同时js和css资源也可以正常访问,但是css中引入的assets目录下的大图片资源出错了(服务端404)

4. 再分析

查看引入的图片资源路径如下:

http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png

实际项目中资源路径如下:

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

很明显图片引入路径有误。分析图片引入路径,发现路径均多了"/static/css"两层目录,猜测是css目录下的css文件引入图片路径为"/static/img/question_bg.61a2825.png" , 查看css文件,css中引入图片路径如下:

background:url(static/img/question_bg.61a2825.png)

5、在解决

css文件中路径存在问题,肯定又是打包哪个环节资源路径没有配置好,分析打包过程,css是在js中引入的或是写在vue文件中的,css文件首先被less,postcss等处理,处理后会被ExtractTextPlugin处理,ExtractTextPlugin将js中的css全部抽离至app.css文件中。

首先将options.extract设为false,关闭抽离css功能,再次打包并部署至特定目录,访问:http://ip:port/public/springActivity/index.html, 啪,页面正常显示,大公即将告成。

分析打包后的文件,发现没有了css文件,发现css文件全部在app.js文件中;通过js将css注入 index.html文件中,因此css文件中引入的图片资源路径应该是相对于index.html文件路径的,即:"static/img/question_bg.61a2825.png",这与下面css文件中的图片资源路径一致,因此图片能够被正常访问。

background:url(static/img/question_bg.61a2825.png)
现在很确定知道问题出在哪了,即:ExtractTextPlugin抽离css文件时没有转换资源引入路径,导致app.css引入了相对app.css目录为"static/img/ .png"的静态资源,该路径相对index.html即为:static/css/static/img/ .png。

因此使用ExtractTextPlugin插件时还需要配置静态资源路径参数,通过查询资料,得知可以通过添加publicPath:"../../"解决该问题:

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath:"../../"     //添加
 })
}

打包部署到特定目录下后访问index.html文件,页面一切正常,app.css文件正常引入,图片资源也正常引入,查看app.css文件引入图片资源方式如下:

background:url(../../static/img/question_bg.61a2825.png

publicPath配置后,css文件中引入的图片文件路径前添加了该路径配置;

publicPath 属性值为打包后的 app.css文件至index.html文件的相对路径

图片资源也可以直接放在vue-cli生成的static目录下规避上述问题,但是通过这种方式图片名称中无法增加md5字符串,不利于版本控制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
理解Koa2中的async&await的用法
Feb 05 #Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 #Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php事件驱动化设计详解
2016/11/10 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
基于python操作ES实例详解
2019/11/16 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
小学新学期寄语
2014/04/02 职场文书
交通事故赔偿协议书
2014/10/16 职场文书