没有合适的资源?快使用搜索试试~ 我知道了~
主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源推荐
资源详情
资源评论
vue.js打包之后可能会遇到的坑!打包之后可能会遇到的坑!
主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑,文中通过示例代码介绍的非常详细,对大家的学习
或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言前言
最近在用webpack+vue写项目,经过几天的熬夜加班改BUG,终于把基本的框架给写完了,后面只要加一些小功能就可以
了,太好吧!先来npm run build 打包出来看看吧!
打包中...,我们用本地服务器打开看一下。
额,不看不知道,一看吓一跳,坑咋这么多呢!但是作为一名积极向上的IT从业者,填坑吧。
1.打包之后没有被渲染出来打包之后没有被渲染出来
怎么回事,刚打开就告诉我啥也没有,这是要搞事情的前奏啊!,我们看一下错误信息,告诉我路径有问题,默默的看一下自
己的地址栏和自己的文件所在目录,原来是我的打包文件没有放到根目录下,这个时候我们可以把我们的两个文件放到根目录
下,但是作为一名有个性的IT人士,当然要看有没有其他方法。从上面的路径中隐隐约约有点预感,static是直接相对于根目
录,说明这有可能打包的时候,有可能设置了绝对路径,如果我改成相对路径,那不就可以了吗。
我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:'/',把它改成assetsPublicPath:'./',加个小
点表示相对路径,不加表示绝对路径。npm run build运行。成功。
2.路由(路由(router))mode:'history',导致页面不能渲染问题导致页面不能渲染问题
地址栏的那个#怎么那么让我不舒服呢!对于有轻度强迫症的我来说,这是不能忍不了的。
我们在项目打包前,开发项目时(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。
这是因为路由(router)无法找到路径中的组件,所以也就无法渲染了。只需要修改 src > router > index.js,在每个path后加
上组件名称就行了,这样就可以了。
这里有个小问题:
为了我们的时间考虑,还是放到根目录吧!
首页没有问题了,逐个链接测试一下。
这是什么鬼,路径和其他图片路径一样,图片也存在啊,为啥你就是这么傲娇,就是报错。来看一下控制台。
结合之前的./原来是相对路径问题,是我的开发文件assets下多个图片文件夹。
这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径'./'改回绝对路径'/'了。这就尴尬了,额额额,大家
就当没看到哈!
资源评论
weixin_38632825
- 粉丝: 3
- 资源: 948
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- matlab基于线性准则的考虑风力发电不确定性的分布鲁棒优化机组组合
- 基于C语言+stm32f4的modbus tcp上下位机通信项目+上位机由LabVIEW编写+源码+开发文档+视频教程(高分项目
- 基于Python的Struts2漏洞扫描器设计源码
- HTML+CSS制作的个人博客网页.zip
- 基于htmlde 爱心代码,但HTML网页源码.zip
- 51单片机实现LED流水灯
- 基于Python的obEspoir分布式游戏框架设计源码
- 基于python的机械设计实用计算器,可计算电动机,传动装置,V带轮,齿轮,轴,轴承的几何或者力,运动学参数数值+源码+开发文档
- 基于HTML +JavaScript的元旦倒计时代码.docx
- 【Unity资源免费分享】孩子益智小游戏unity 5x系列Baby Doll House Cleaning
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功