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 相关文章推荐
jQuery基础框架浅入剖析
Dec 27 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python类属性的延迟计算
2016/10/22 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python实现局域网内实时通信代码
2019/12/22 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
后勤岗位职责
2013/11/26 职场文书
微笑服务演讲稿
2014/05/13 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
出国导师推荐信
2015/03/25 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL