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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
javascript add event remove event
Apr 07 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
Swiper实现导航栏滚动效果
Oct 16 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
php字符串截取的简单方法
2013/07/04 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Python生成pdf文件的方法
2014/08/04 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
中国央视网签名寄语
2014/01/18 职场文书
致百米运动员广播稿
2014/01/29 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js