vue-cli与webpack处理静态资源的方法及webpack打包的坑


Posted in Javascript onMay 15, 2018

通过Vue-cli进行webpack打包的坑

Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了。  

我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决。

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

处理静态资源

你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢?本文主要和大家介绍了vue-cli与webpack结合如何处理静态资源,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

打包的资源

为了回答这个问题,我们首先要明白Webpack是如何处理静态资源的。在*.vue组件里,所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。

举个例子,在<img src"./logo.png">和背景background: url(./logo.png),”./logo.png”是一个相对路径,会被Webpack当做一个依赖加载。

但是因为logo.png并不是JavaScript,所以如果被当成一个依赖的花,我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader,所以你通常不用担心相对路径的部署问题。

即使这些资源有可能在构建过程中被内联/拷贝/重命名,他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源,如同其他的资源文件夹。

事实上,你都不必把他们全放在/src/assets,你可以根据模块/组件来组织利用他们。比如说,你可以把任一组件放到他们自己的目录,并在该目录下存放静态资源。

资源引入规则

相对路径,比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。

没有前缀的路径,比如assets/logo.png,同相对路径,转义成./assets/logo.png

有~前缀的路径。 ~被认为是一个模块请求,同require('some-module/image.png')。根路径,比如/assets/log.png

在JavaScript得到资源路径

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}

这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。

“真实的”静态资源

与此相对的,static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹,引用这些文件需要使用绝对路径。

总结

以上所述是小编给大家介绍的vue-cli与webpack处理静态资源的方法及webpack打包的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 #Javascript
vue中keep-alive的用法及问题描述
May 15 #Javascript
react中使用swiper的具体方法
May 15 #Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
购房协议书范本
2014/04/11 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
党支部工作总结2015
2015/04/01 职场文书
2015年加油站工作总结
2015/05/13 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
红楼梦读书笔记
2015/06/25 职场文书