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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
3种js实现string的substring方法
Nov 09 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Node.js笔记之process模块解读
May 31 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
react以create-react-app为基础创建项目
2018/03/14 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
微信小程序自定义胶囊样式
2020/12/27 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python如何将图片转换素描画
2020/09/08 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
车间班组长的职责
2013/12/13 职场文书
服装店营销方案
2014/03/10 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
岳麓书院导游词
2015/02/03 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL