使用宝塔在服务器上部署 Vue + Node 项目全流程-linux运维-PHP中文网

使用宝塔在服务器上部署 Vue + Node 项目全流程

霞舞

发布： 2025-08-03 09:20:02

原创

354人浏览过

使用宝塔部署 vue + node 项目的核心是配置反向代理和静态资源处理，1. 在宝塔创建网站并上传 vue 的 dist 文件到根目录；2. 将 node 项目上传至服务器指定目录并通过终端安装依赖；3. 使用 pm2 或命令行启动 node 服务并确保监听正确端口；4. 在宝塔网站设置中配置反向代理，将 /api/ 等请求转发到 node 服务地址如 http://127.0.0.1:3000；5. 编辑 nginx 配置文件，通过 try_files $uri $uri/ /index.html; 解决 vue history 模式刷新 404 问题；6. 申请 let's encrypt ssl 证书并配置 https，更新 nginx 监听为 443 并添加证书信息；7. 使用 pm2 管理 node 进程，实现自动重启与开机自启；8. 完成域名解析后测试页面访问与接口连通性，最终实现 vue 前端与 node 后端协同运行。

使用宝塔在服务器上部署 Vue + Node 项目全流程

使用宝塔部署 Vue + Node 项目，核心在于配置好反向代理，让 Node 服务运行，并通过 Nginx 将请求转发到 Node 服务，同时处理好 Vue 项目的静态资源。

解决方案：

准备工作：

立即学习“前端免费学习笔记（深入）”；
- 确保你已经购买了服务器，并且安装了宝塔面板。我个人比较喜欢用腾讯云或者阿里云的服务器，稳定性还可以。
- 服务器上安装了 Node.js 和 Nginx。宝塔面板里可以直接安装，很方便。
- Vue 项目已经打包成静态资源 (dist 目录)，Node 项目代码也准备好了。
宝塔面板操作：
- 创建网站： 在宝塔面板里新建一个网站，填写域名，根目录可以随便选一个空的目录。
- 上传文件： 将 Vue 项目打包好的
```
dist
```
  登录后复制
  目录下的所有文件上传到网站的根目录。 Node 项目代码上传到服务器的任意目录，比如
```
/home/node_projects/my_project
```
  登录后复制
  。
- 安装 Node.js 项目依赖： 通过宝塔面板的 "终端" 功能，进入 Node 项目的目录，执行
```
npm install
```
  登录后复制
  或者
```
yarn install
```
  登录后复制
  安装项目依赖。记得先安装 Node.js 版本管理器 nvm，这样可以方便切换 Node 版本，避免版本冲突。
- 启动 Node.js 项目： 继续在终端里，执行
```
npm start
```
  登录后复制
  或者
```
node app.js
```
  登录后复制
  (根据你的项目启动脚本) 启动 Node 项目。可以使用
```
pm2
```
  登录后复制
  来管理 Node 进程，这样即使项目崩溃了也能自动重启。宝塔面板里有 pm2 管理器，可以直接安装使用。
配置 Nginx 反向代理：
- 在宝塔面板里找到你创建的网站，点击 "设置"，然后选择 "反向代理"。
- 添加反向代理，目标 URL 填写你的 Node 项目运行的地址，例如
```
http://127.0.0.1:3000
```
  登录后复制
  (假设 Node 项目监听 3000 端口)。
- 保存配置。

配置 Nginx 静态资源：

编辑网站的 Nginx 配置文件。在宝塔面板里，网站设置里可以找到 "配置文件"。
找到
```
server
```
登录后复制
块，添加以下配置：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        root /www/wwwroot/your_website_root; # Vue 项目 dist 目录
        index index.html index.htm;
        try_files $uri $uri/ /index.html; #  处理 Vue Router 的 history 模式
    }

    location /api/ { #  假设你的 API 请求以 /api/ 开头
        proxy_pass http://127.0.0.1:3000; #  Node 项目地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    #  其他配置...
}

登录后复制

保存配置文件，并重启 Nginx 服务。

域名解析：
- 将域名解析到你的服务器 IP 地址。这个需要在你的域名服务商那里设置。
测试：
- 在浏览器中访问你的域名，看看 Vue 项目是否正常显示。
- 测试 API 接口是否能够正常访问。

如何解决 Vue 项目刷新 404 问题？

Vue 使用

history

登录后复制

模式时，刷新页面会出现 404 错误，因为服务器不知道如何处理这些路由。解决方法就是在 Nginx 配置中添加

try_files $uri $uri/ /index.html;

登录后复制

这行代码。它的作用是：当用户访问的 URL 对应的文件或目录不存在时，就将请求转发到

index.html

登录后复制

，让 Vue Router 来处理。这个算是个小坑，很多人会忽略。

如何配置 HTTPS？

使用 HTTPS 可以提高网站的安全性。宝塔面板提供了免费的 SSL 证书申请和配置功能。在网站设置里，找到 "SSL"，然后选择 "Let's Encrypt"，按照提示操作即可。配置 HTTPS 后，记得将 Nginx 配置文件中的

listen 80;

登录后复制

改为

listen 443 ssl;

登录后复制

，并且添加 SSL 证书相关的配置。

如何使用 PM2 管理 Node.js 进程？

PM2 是一个 Node.js 进程管理器，可以方便地启动、停止、重启 Node.js 应用程序。宝塔面板里有 PM2 管理器，可以直接安装使用。安装完成后，可以通过 PM2 启动 Node 项目：

pm2 start app.js --name my_project #  启动 app.js，并命名为 my_project
pm2 list #  查看所有运行的进程
pm2 stop my_project #  停止 my_project
pm2 restart my_project #  重启 my_project
pm2 log my_project #  查看 my_project 的日志

登录后复制

PM2 还可以设置开机自启动，这样服务器重启后，Node 项目也能自动运行。

以上就是使用宝塔在服务器上部署 Vue + Node 项目全流程的详细内容，更多请关注php中文网其它相关文章！