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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JavaScript表单常用验证集合
Jan 16 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
微信小程序时间控件picker view使用详解
Dec 28 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
代码生成器 document.write()
2007/04/15 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
用python处理图片实现图像中的像素访问
2018/05/04 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
用Python写一个自动木马程序
2019/09/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python中Selenium库使用教程详解
2020/07/23 Python
生产部厂长助理职位说明书
2014/03/03 职场文书
倡议书格式
2014/08/30 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏