vue-cli脚手架打包静态资源请求出错的原因与解决


Posted in Javascript onJune 06, 2019

问题

  1. vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。
  2. 静态资源打包使用相对路径后css文件引入大图片路径错误问题

使用vue-cli2脚手架生成的默认打包配置文件,npm run build打包,部署项目到特定路径下://ip:port/test/index.html
此时访问//ip:port/test/index.html可以正常访问,但是引用的js和css等文件服务器响应为404,此时我们查看资源请求路径:

http://ip:port/static/css/app.[hash].css
http://ip:port/static/js/app.[hash].js

可以看出,上面的静态资源访问路径是不正确的,我们正确的请求路径应该是

http://ip:port/test/static/css/app.[hash].css
http://ip:port/test/static/js/app.[hash].js

原因

可以看出导致资源加载失败的原因是路径错误,我们可以移步看看index.html文件,

<!DOCTYPE html>
 <html>
 <head>
 <title>project</title>
 <link href=/static/css/app.css rel=stylesheet>
 </head>
 <body>
 <div id=app></div>
 <script type=text/javascript src=/static/js/app.js>
 </script>
 ...
 </body>
 </html>

可以看出引入的css和js都是使用的绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。

解决

在webpack打包时,使用相对路径来处理静态资源,修改build中资源发布路径配置(build/config.js);

build: {
 ...
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 ...
}

将assetsPublicPath: '/',更改为assetsPublicPath: './',再进行打包,并将资源部署到特定路径下,然后访问,此时index.html可以正常访问,同时js和css资源也可以正常加载访问了。

css中引入assets目录下的图片资源出错

我们经常这样引用一个img图片

background: url('static/img/bg.png');

但是打包后看到这个图片的引用地址是这样的。

http://ip:port/test/static/css/static/img/bg.png

可以看出css中图片的路径存在问题了,分析打包过程,css是在js中引入的或是写在vue文件中的,css文件首先被less,postcss等处理,处理后会被ExtractTextPlugin处理,ExtractTextPlugin将js中的css全部抽离至app.css文件中。

解决方法一

将options.extract设置为false

options.extract: false,

关闭抽离css功能,再次打包并部署,此时你会发现没有css文件了,css文件全部在app.js文件中,通过js将css注入到index.html文件中,此时图片的访问路径是相当index.html文件的,所以可以正常访问

解决方案二

设置ExtractTextPlugin插件中的publicPath
ExtractTextPlugin插件是为了将css从js文件中抽离出来,我们可以通过配置ExtractTextPlugin的静态资源路径参数来达到同样的效果,build目录下的utils.js文件,修改publicPath: '../../';

// Extract CSS when that option is specified
// (which is the case during production build)
if (!options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath: '../../'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

再次打包部署,发现此时的图片访问路径为'../../static/img/bg.png';

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
You might like
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python pass详细介绍及实例代码
2016/11/24 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
JSF的标签库有哪些
2012/04/27 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
市场安全管理制度
2014/01/26 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
公司管理制度范本
2015/08/03 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android