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 相关文章推荐
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
node网页分段渲染详解
Sep 05 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
浅析为什么a="abc" 不等于 a=new String("abc")
Oct 25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
用ODBC的分页显示
2006/10/09 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php无限极分类实现方法分析
2019/07/04 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
详解Python中的动态属性和特性
2018/04/07 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
进程的查看和调度分别使用什么命令
2013/12/14 面试题
物流经理自我评价
2013/09/23 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
销售2014年度工作总结
2014/12/08 职场文书
社区党务工作总结2015
2015/05/19 职场文书
婚礼迎宾词大全
2015/08/10 职场文书