vue.js打包之后可能会遇到的坑!


Posted in Javascript onJune 03, 2018

前言

最近在用webpack+vue写项目,经过几天的熬夜加班改BUG,终于把基本的框架给写完了,后面只要加一些小功能就可以了,太好吧!先来npm run build 打包出来看看吧!

vue.js打包之后可能会遇到的坑!

打包中...,我们用本地服务器打开看一下。

额,不看不知道,一看吓一跳,坑咋这么多呢!但是作为一名积极向上的IT从业者,填坑吧。

1.打包之后没有被渲染出来

vue.js打包之后可能会遇到的坑!

怎么回事,刚打开就告诉我啥也没有,这是要搞事情的前奏啊!,我们看一下错误信息,告诉我路径有问题,默默的看一下自己的地址栏和自己的文件所在目录,原来是我的打包文件没有放到根目录下,这个时候我们可以把我们的两个文件放到根目录下,但是作为一名有个性的IT人士,当然要看有没有其他方法。从上面的路径中隐隐约约有点预感,static是直接相对于根目录,说明这有可能打包的时候,有可能设置了绝对路径,如果我改成相对路径,那不就可以了吗。

vue.js打包之后可能会遇到的坑!

我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:'/',把它改成assetsPublicPath:'./',加个小点表示相对路径,不加表示绝对路径。npm run build运行。成功。

2.路由(router)mode:'history',导致页面不能渲染问题

vue.js打包之后可能会遇到的坑!

地址栏的那个#怎么那么让我不舒服呢!对于有轻度强迫症的我来说,这是不能忍不了的。

我们在项目打包前,开发项目时(npm start),在vueRouter里设置mode:"history".可以去掉#号。

这里强行解释一番:

路由(router)默认 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载,因为对于正常的页面来说,更换URl一定是会导致页面的更换的, 而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。

路由(router)的history模式,这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。没有#号。

npm run build打包中....

什么鬼,为什么我的路由(router)部分没有被渲染出来,这就是history的坑了,解决方法一,会到以前的hash模式;解决方法二,设置routes里的路由name。

vue.js打包之后可能会遇到的坑!

这是因为路由(router)无法找到路径中的组件,所以也就无法渲染了。只需要修改 src > router > index.js,在每个path后加上组件名称就行了,这样就可以了。

这里有个小问题:

vue.js打包之后可能会遇到的坑!

vue.js打包之后可能会遇到的坑!

为了我们的时间考虑,还是放到根目录吧!

首页没有问题了,逐个链接测试一下。

vue.js打包之后可能会遇到的坑!

vue.js打包之后可能会遇到的坑!

这是什么鬼,路径和其他图片路径一样,图片也存在啊,为啥你就是这么傲娇,就是报错。来看一下控制台。

vue.js打包之后可能会遇到的坑!

结合之前的./原来是相对路径问题,是我的开发文件assets下多个图片文件夹。

vue.js打包之后可能会遇到的坑!

这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径'./'改回绝对路径'/'了。这就尴尬了,额额额,大家就当没看到哈!

暂时遇到这些坑,这是自己写项目的有感而发,希望对看过这篇文章的人有所帮助。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 #Javascript
vue之将echart封装为组件
Jun 02 #Javascript
React学习笔记之高阶组件应用
Jun 02 #Javascript
浅谈node中的cluster集群
Jun 02 #Javascript
详解AngularJS 过滤器的使用
Jun 02 #Javascript
简化vuex的状态管理方案的方法
Jun 02 #Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
You might like
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php不写闭合标签的好处
2014/03/04 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
Node.js文件操作详解
2014/08/16 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Python try except finally资源回收的实现
2021/01/25 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
工程专业求职自荐书范文
2014/02/18 职场文书
动员大会主持词
2014/03/20 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
就业证明函
2015/06/17 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android