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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
Vue.js中的高级面试题及答案
Jan 13 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
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
初中同学聚会邀请函
2014/02/03 职场文书
大学生新学期计划书
2014/04/28 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
初中同学会活动方案
2014/08/22 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript