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 相关文章推荐
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
JavaScript如何操作css
Oct 24 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python实现银行账户系统
2021/02/22 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
检察官就职演讲稿
2014/01/13 职场文书
婚礼主持结束词
2014/03/13 职场文书
重阳节慰问信
2015/02/15 职场文书
质量保证书怎么写
2015/02/27 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技