宝塔面板部署前端项目

于 2024-06-25 14:31:15 发布
阅读量252 收藏 1
点赞数 2
分类专栏： 开发攻城狮 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53931766/article/details/139958162
版权

部署前端项目

1 打包自己的项目

image.png

2 登录宝塔面板

点击左侧“网站”菜单进入对应页面
点击“添加站点”
image.png

3 添加站点

填写域名，如果没有域名的，可以填写服务器地址。
image.png

4 设置域名

点击操作列的“设置”，打开弹窗
image.png

填写并添加“域名”和“端口号”。
同时需要将该端口号在服务器中防火墙的规则中写入，否则打开页面是空白页。

image.png

5 进入当前站点对应的文件目录中

直接点击根目录即可进入
image.png
进来后会有一些默认文件，可选择是否删除，默认不删除也无妨。
image.png

6 上传打包后的文件

image.png

7 访问网站

通过域名或者IP，加上端口号就可以访问。
如果打开是空白页面，检查一下端口是否开放。

网页装修工
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解从买域名到使用pm2部署node.js项目全过程
10-18
对于初次接触服务器部署的前端开发者来说，这是一个非常实用的指南。首先，我们需要购买域名和服务器，通常可以通过云服务提供商如腾讯云获取。接着，我们将介绍如何在服务器上安装Node.js和PM2，以及如何将项目通过...
Crmeb Java 项目封装打包.pdf
10-22
在宝塔面板中，创建对应的API站点，并将JAR文件放置于站点根目录。启动JAR文件的shell脚本可能需要根据服务器环境进行调整，确保其正确运行。素材目录需在YAML文件中预先配置好，以便程序能正确读取。 项目启动后，...
使用宝塔面板部署前端项目到服务器
m0_62476845的博客
12-22 3251
在此之前，我们已经创建了宝塔面板账号、拥有了一台服务器。现在，我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问，那么我们应该在宝塔面板上面怎样做呢？一、第一步：创建文件夹1、打开我们的宝塔面板后，我们会看到左侧有一列目录，点击里面的文件。2、点击在根目录下名叫www的文件夹3、点击里面叫wwwroot的文件夹4、在里面随便创建一个文件夹准备放入我们的前端代码5、放入我们的前端代码二、第二步：部署前端项目1、在宝塔面板的左侧有个叫网站的名字，点进去并选择node项目。
宝塔面板部署vue前端项目
m0_57057282的博客
06-28 1102
阿里云部署vue前端项目
使用宝塔面板部署前端网站
weixin_43239880的博客
03-13 2426
添加一个38760的入口（为什么是38760而不是其他的，你要看上面宝塔外网ip的端口号，我的是38760，但是你起的可能是其他的，所以你要注意），其他选择如图。这里的ip地址（公）就是待会你要连接的服务器的ip地址，也是别人访问你网站的地址，可以注意一下。然后你就能找到你的服务器了，其中最重要的就是实例（管理你的服务器状态）和安全组（控制可访问该服务器的端口号）在登录到首页的时候，宝塔会提示你安装环境，你就直接选择左边的一键安装就ok了。在浏览器中输入你阿里云对公ip，就能访问到你的网站啦！
健身类微信小程序前端和后端源码
04-25
宝塔面板->网站->本站->设置->网站目录->运转目录->选择 public 伪静态设置为 location / { try_files $uri $uri/ /index.php$is_args$query_string; } 进入网站根目录，将 storage 和 bootstrap/cache 设为权限...
MF00860-小程序电商源码（前端+后台）.zip
08-11
服务器宝塔面板 PHP 5.6 Mysql 5.5及以上版本 Linux Centos7以上 系统介绍： 1.一款基于微信的小程序电商系统，是中小企业零售解决的电子商务最佳入口， 无需安装，微信搜搜即可打开。让您和客户距离，再近一...
服务器搭建-上线.pdf
04-20
安装完成后，通过宝塔面板的文件管理功能，将前端Vue项目（使用npm run build打包后的dist文件）和Node.js后台接口文件上传并解压。 在配置环节，我们需要在PM2管理器中启动Node.js服务，并在Nginx中设置反向代理，...
vue cli3 配置proxy代理无效的解决
10-16
在Vue CLI 3中，开发过程中常常需要配置代理...如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的响应。通过这种方式，你可以更深入地了解问题所在，并找到解决办法。
Scratch少儿编程教学平台，集成Scratch、ScratchJr、Python教学工具 包含课程、班级、作业、权限、社区等
05-10
点击查看宝塔面板部署教程 环境准备 以CentOS服务器为例，其他系统操作流程基本一样。 安装mysql5.6 略 设置数据库表名忽略大小写（重要） lower_case_table_names=1 导入api/db文件夹的sql文件。如果是升级，...
基于springboot和vue前后端分离的博客系统+源代码+文档说明
11-28
后端采用springboot实现，使用shiro和jwt做用户认证和授权，redis做nosql缓存，项目部署在宝塔面板上。 #### **技术栈** **前端** | 名称 | 技术点 | | ---------- | ------------------------- | | 基础 | vue...
健身房推广销售型微信小程序独即时版本加客户端
04-23
健身类微信小程序前端和后端源码 ...建议应用宝塔面板，配置好 php7.2 加 mysql5 ，建即时1个站点，然后将解压后的源码上传到该目录下，宝塔面板->网站->本站->设置->网站目录->运转目录->选择 public 伪静态设置为
软件工程课程设计-学习自律平台-240+页文档
最新发布
06-04
包括封面、需求分析、概要设计、详细设计、测试文档、附录等部分（页面已美化） 包括结构化设计的图（IPO图、层次图、数据流图、...使用宝塔面板进行部署 项目已经获得计算机设计大赛的奖项 得到老师认可 实验得分很高
php即时通讯功能的多功能内网、外网办公管理系统
03-27
步骤：登录宝塔面板 -> 软件商店 -> 一键部署 -> 配置域名 -> 搭建成功 ### 当前涵盖功能 1.员工空间功能 2.文件存储功能 3.绩效考评功能 4.即时通讯功能 5.每日待办功能 6.客户管理功能 7.部门管理功能 8.个人笔记...
dujiaoka::rocket:独角数卡(发卡)-开源式站长自动化售货解决方案、高效、稳定、快速！:party_popper::party_popper:
05-01
独角数卡 ...如果您连宝塔、phpstudy、AppNode等一键可视化服务器面板也未曾使用或听说过，那么我大概率劝您放弃本程序！ 如果您觉得部署有难度，建议仔细阅读（仔细！）宝塔视频安装篇教程，里面有保姆级
超级火爆的小程序源码商城系统
03-05
版本包含全部插件 源码已经经过详细测试,，持续稳定更新中 此版本一次购买持续更新,不需要自己手动升级,后台可以自己进行手动升级,...必要环境 Linux/宝塔面板+php72+Mysql5.6+Sg11+Redis等 内涵完整教程 侵权删
java springboot校园跑腿小程序源码带安装教程
05-30
源码包含client 客户端、server 服务端、微信wxapp小程序 一款基于JAVA Springboot开发的跑腿多校...需要工具：linux系统宝塔面板，环境nginx、mysql、pm2管理器（它自带nodejs）安装部署搭建请参考源码里面的教程文档
全新去水印小程序-免受权-送接口
09-11
亮点： 1.程序免授权 2.送接口 3.程序可自定义版权 部署： 1.上传后端到服务器根目录 2.运行域名执行安装 ...4.返回您安装的去水印定制版后台填写uid和秘钥 ...推荐宝塔面板 NGINX+PHP7.1-7.3+mysql5.6
宝塔部署前端vue项目
09-09
要宝塔上部署前端Vue项目，可以按照以下步骤进行操作： 1. 首先，将准备好的Vue项目进行打包，使用命令`npm run build`，这将生成一个dist文件夹。 2. 登录宝塔面板，并进入左侧的网站对应页面。 3. 如果还没有域名，可以添加自己的服务器地址作为站点。如果已经添加过了服务器地址，想在服务器的其他端口上展示项目，可以随意填写一个不存在的域名。 4. 进入当前添加好的站点，点击右侧的设置，进入设置页面。 5. 在设置页面中，添加自己服务器的地址和端口（端口可以自行选择），然后点击添加。接着，点击删除之前随意添加的域名，将添加的服务器地址和端口作为新的域名。 6. 进入当前创建好的站点对应的文件路径，可以选择是否删除原始文件。将打包生成的dist文件夹放入该路径中。 7. 如果需要配置反向代理，可以在网站对应页面的设置中找到反向代理选项，并添加反向代理。请确保代理目录与前端配置的代理名称一致，设置目标URL和发送域名为需要代理的地址。 8. 如果需要部署多个项目，可以在vue-router文件中使用history模式，并设置base路径为指定的子路径。在宝塔的设置配置文件中添加相应的语句。 以上是在宝塔上部署前端Vue项目的一般步骤。根据具体情况，可能还需要进行其他配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值