快速部署Vue.js前端项目

快速部署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框架也使得我们的开发效率更高，开发人员可以更加专注数据的获取和展示，减小开发成本和压力。