vue的项目如何打包上线


Posted in Vue.js onApril 13, 2022

vue.js项目打包上线

最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的。

这里我简单的列出这个过程

首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:

vue的项目如何打包上线

上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可:

vue的项目如何打包上线

注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:

vue的项目如何打包上线

这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。

vue.js打包之后遇到的坑

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

vue的项目如何打包上线

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

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

打包之后没有被渲染出来

vue的项目如何打包上线

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

vue的项目如何打包上线

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

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

vue的项目如何打包上线

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

我们在项目打包前,开发项目时(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的项目如何打包上线

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

这里有个小问题:

vue的项目如何打包上线

vue的项目如何打包上线

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

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

vue的项目如何打包上线

vue的项目如何打包上线

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

vue的项目如何打包上线

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

vue的项目如何打包上线

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
You might like
一个目录遍历函数
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python实现一个简单的MySQL类
2015/01/07 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
用python发送微信消息
2020/12/21 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
爱我中华教学反思
2014/04/28 职场文书
银行求职信怎么写
2014/05/26 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年教务工作总结
2015/05/23 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技