详解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 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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
Zerg剧情介绍
2020/03/14 星际争霸
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
VBScript版代码高亮
2006/06/26 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JavaScript DOM基础
2015/04/13 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
python 两种方法删除空文件夹
2020/09/29 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
药品业务员岗位职责
2014/04/17 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2016年少先队活动总结
2016/04/06 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL