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 相关文章推荐
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
javascript 打印页面代码
2009/03/24 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
python将txt文件读入为np.array的方法
2018/10/30 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python脚本开机自启的实现方法
2019/06/28 Python
python实现井字棋小游戏
2020/03/04 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python文件排序的方法总结
2020/09/13 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
阳光体育活动方案
2014/02/16 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
详解CSS故障艺术
2021/05/25 HTML / CSS