远在天边，近在眼前：云服务器下的Vue+Node.js部署全攻略

用云服务器让你的 Vue.js + Node.js 项目随时可用

在开发 Web 应用程序时，让项目保持随时可用至关重要。借助云服务器，你可以实现这一点，让你的项目随时随地都可以访问。在本指南中，我们将介绍如何使用阿里云 ECS 服务器将 Vue.js + Node.js 项目部署到云服务器。

为什么需要云服务器？

本地运行的项目在关闭命令行或关机时会停止运行。要保持项目一直可用，你需要一台永远在线的计算机，这就是云服务器的用武之地。

部署 Vue.js + Node.js 项目的必要条件

在部署项目之前，你需要准备以下组件：

• 云服务器（本文使用阿里云 ECS 服务器）
• 宝塔面板（服务器管理面板）
• Node.js
• Vue.js
• MySQL（数据库，可选）
• FTP 工具（如 FileZilla）

部署步骤

1. 购买并配置云服务器

根据项目的需要选择合适的云服务器配置。登录阿里云官网，购买 ECS 服务器，并选择所需的配置。配置服务器后，记下服务器的 IP 地址、用户名和密码。

2. 安装宝塔面板

登录服务器后，使用以下命令安装宝塔面板：

wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

安装完成后，浏览器访问服务器 IP 地址:8888，使用默认账号密码登录宝塔面板。

3. 安装 Node.js

在宝塔面板的“软件商店”中搜索“Node.js”，并安装最新版本。

4. 安装 Vue.js

在服务器上安装 Vue.js CLI：

npm install -g @vue/cli

创建一个新的 Vue.js 项目：

vue create my-project

进入项目目录：

cd my-project

安装项目依赖：

npm install

5. 部署项目

在项目目录下运行以下命令将项目打包为生产版本：

npm run build

使用 FTP 工具将打包后的项目文件上传至服务器的 /www/wwwroot/my-project 目录。

6. 配置 nginx

在宝塔面板的“网站”中添加一个新站点，并设置以下参数：

域名：你的域名
根目录：/www/wwwroot/my-project

在“设置”选项卡中，勾选“伪静态”，并添加以下伪静态规则：

location / {
    try_files $uri $uri/ /index.html;
}

7. 配置数据库（可选）

如果项目需要使用数据库，需要在宝塔面板中创建一个新的数据库。将数据库信息配置在项目配置文件中。

8. 启动项目

在宝塔面板的“网站”中，找到你的项目，并点击“启动”按钮。

常见问题及解决方法

1. 无法访问项目

• 检查服务器防火墙是否开放了 80 端口。
• 检查 nginx 是否正确配置。
• 检查项目是否正确打包并上传至服务器。

2. 项目运行报错

• 检查项目依赖是否正确安装。
• 检查项目配置文件是否正确配置。
• 检查服务器是否有足够的内存和 CPU 资源。

3. 数据库连接失败

• 检查数据库信息是否正确配置在项目配置文件中。
• 检查数据库是否正常运行。
• 检查服务器是否开放了 3306 端口。

结语

将 Vue.js + Node.js 项目部署到云服务器可以确保你的项目始终在线并可访问。本指南提供了详细的步骤，帮助你顺利完成部署。通过遵循这些步骤，你可以让你的项目随时为用户服务，而不必担心服务器关闭或其他问题。