快速部署Vue.js前端项目
前言
Vue.js相较于传统的HTML三件套(HTML、CSS、JavaScript)有许多优点。其中最重要的一点是,Vue.js提供了响应式数据绑定的能力,这意味着当数据发生变化时,视图会自动更新,无需手动操作DOM。此外,Vue.js采用组件化开发的方式,允许将一个页面拆分成多个可复用的组件,从而提高了代码的可维护性和可重用性。Vue.js还提供了许多方便的工具和插件,例如路由管理、状态管理、打包工具等,使得开发效率更高。Vue.js是一款功能强大、易于学习、易于使用的前端框架,已经成为了许多开发者的首选之一。
今天我们来学习如何将Vue前端项目部署到服务器。
所需软/硬件
本文教程使用腾讯云服务,以Centos7系统为例,使用宝塔面板进行管理。
教程
1.配置服务器
1.1购买服务器
最近腾讯云新上架了一批轻量应用服务器,提供多款配置型号选择,本文我们选用33元/月的配置来完成教程。
1.2添加防火墙规则
添加防火墙规则以开放端口,我这里为了方便一次性开放了所有端口,各位可以根据实际情况进行选择。
2.配置服务器运行环境
2.1安装宝塔面板并完成环境配置
我们前往宝塔面板官方下载页面,根据系统类型选择对应安装脚本进行安装,我们这里选择Centos安装脚本
安装完成后首先安装服务器套件,本文使用Nginx1.22、Mysql5.7,各位可以根据实际需求选择安装:
安装完基本运行环境后我们还需要来到Node项目界面,打开版本管理器安装Node.js,这里我们需要注意,从V17开始node改变了安全策略,可能导致部分用户的代码无法构造,本教程以V16.19.1为例:
3. 部署项目
3.1上传并配置Vue项目
接下来我们上传Vue项目到服务器上并完成基本配置后点击保存即可,其中启动选项我们选择了npm run serve来完成对项目的测试:
此时项目将会进入动态编译模式,优点是当我们完成对代码的修改后可以即时自动生效,以便测试,但这样的缺点是运行效率较低,服务器负载较高,当我们调试完毕后可以使用npm run build命令来打包项目成静态文件:
3.2部署打包后的项目
打包完成后我们即可像普通网页项目一样部署,使用腾讯云DNS绑定域名后即可访问:
3.3配置伪静态
最重要的一点来了,由于我的项目采用的History模式而非Hash,由于History模式下我们没有配置好路由,导致web服务器找不到我们的入口,直接部署完前端静态文件后会使直接访问url时404报错,这是我们需要在Nginx的伪静态中新增重写规则来完成路由指向:
4.部署完成
最后我们就可以愉快地访问自己的项目啦:
总结
在本教程中,我们一起学习了从购买服务器、配置服务器和项目到最终成功上线项目,作者不得不感叹随着时代的发展,前端框架已经产生了质的飞跃,如今前后端分离可以大幅减轻服务器压力,而基于MVVM模型的Vue框架也使得我们的开发效率更高,开发人员可以更加专注数据的获取和展示,减小开发成本和压力。
打卡升级
这个好 给赞
自己玩玩前端项目的话,Vercel才是优选吧,免费100GB宽带,随便玩嘞。
大佬 牛逼!
又学习到了,写的非常好
辛苦大佬分享了,我先学习一下
辛苦了,学习一下
谢谢,分享学习了
有意思,每次看都有新体验!
学习了!!!来顶一下?
瞅瞅瞅瞅,mark一手
感谢分享,内容不错,学习了!!
mark一手!不错!
点赞,感觉真不错??
mark一手,这么优秀哈哈
不明觉厉,支持一下??????
厉害了!内容不错,来顶顶帖!?