首页 开发运维 【实战笔记】宝塔面板部署Vue类型的Node项目

【实战笔记】宝塔面板部署Vue类型的Node项目

  • 原创
  • 作者：程序员三丰
  • 发布时间：2024-10-23 12:47
  • 标签： Vue 宝塔面板
  • 浏览量：644
本文记录了实际开发工作中如何在宝塔面板中配置vue开发的node项目。

准备工作

  • 安装Nginx运行环境;
  • 准备好vue项目代码，并上传到宝塔的项目目录/www/wwwroot下；
  • 对vue项目根目录下 vite.config.js 文件做以下配置更改：
    • 将 server.host 改为 0.0.0.0，以支持公网可访问，这个很重要！！！必须修改，默认是 localhost。
    • server.port 的默认端口为 5173，根据实际需求看是否需要修改。

添加Node项目

  • 填写项目信息（注意下面截图上红色箭头标注的输入项）

  • 域名管理，添加域名

  • 开启外网映射

  • 配置完成，回到项目列表查看项目状态，运行中即项目运行成功

  • 使用给项目配置的域名，通过浏览器访问，如果可正常访问，则表示成功添加Node项目。

  • 如有问题，可在项目列表，点击项目行操作列的【设置】按钮，打开项目管理界面，查看项目日志，场景类似vscode的控制台，就是我们熟悉的环境了。

至此，完成添加Node项目。

声明：本文为原创文章，51blog.xyz和作者拥有版权，如需转载，请注明来源于51blog.xyz并保留原文链接：https://www.51blog.xyz/article/69.html

文章归档

PHP后端
Javascript前端
HTML/CSS
开发运维
资源分享
Go入门学习笔记

推荐文章

buildadmin logo
Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。

热门标签

PHP ThinkPHP ThinkPHP5.1 Go Mysql Mysql5.7 Redis Linux CentOS7 Git HTML CSS CSS3 Javascript JQuery Vue LayUI VMware Uniapp 微信小程序 docker wiki Confluence7 学习笔记 uView ES6 Ant Design Pro of Vue React ThinkPHP6.0 chrome 扩展 翻译工具 Nuxt SSR 服务端渲染 scrollreveal.js ThinkPHP8.0 Mac webman 跨域CORS vscode GitHub ECharts Canvas vue3

友情链接

Web技术分享 方法SEO顾问 静觅丨崔庆才的个人站点