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 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JS解析XML实例分析
Jan 30 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript实现动态留言板
Mar 16 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 rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
python解析xml文件实例分享
2013/12/04 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
工作保证书范文
2014/04/29 职场文书
房地产活动策划方案
2014/05/14 职场文书
银行求职信
2014/05/31 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python