宝塔部署VueNode项目全流程教程
时间:2025-08-02 19:45:46 153浏览 收藏
本文详细介绍了如何使用宝塔面板一键部署 Vue + Node.js 项目,并针对百度SEO进行了优化。文章从服务器准备、宝塔面板操作入手, step by step 地讲解了网站创建、文件上传、Node.js依赖安装与项目启动,以及Nginx反向代理配置的关键步骤,实现将/api/等请求转发到Node服务。重点解决了 Vue history 模式下刷新 404 问题,并详细介绍了 HTTPS 证书申请与配置,提升网站安全性。同时,还介绍了使用 PM2 管理 Node.js 进程,确保项目稳定运行,并实现开机自启。通过本文,即使是新手也能轻松完成 Vue + Node.js 项目的部署,提升网站性能和用户体验。
使用宝塔部署 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 项目,核心在于配置好反向代理,让 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 项目也能自动运行。
今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
236 收藏
-
253 收藏
-
302 收藏
-
433 收藏
-
422 收藏
-
229 收藏
-
377 收藏
-
278 收藏
-
398 收藏
-
437 收藏
-
376 收藏
-
491 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习