部署前端项目到服务器
创始人
2025-01-17 01:01:56
0
声明:1.我演示使用的是华为云的服务器的Linux 系统        2.通过宝塔部署项目        3.项目是vue打包之后的 	   4.其他服务器都差不多一样的配置	               5.我是做前端的,下面教程只是个人操作 

1.购买服务器

1.1:以下案例我使用的是华为云的服务器
购买服务器后,都有部署教程
在这里插入图片描述
有的人可能不知道下面的命令在那里输入,其实下面的命令是在服务器上输入安装宝塔面板(具体在哪安装查看2.2)
在这里插入图片描述

1.2:购买成功

在这里插入图片描述

2. 点击远程远程登录

在这里插入图片描述
2.1.下面的方式都可以(我用的第二个)
在这里插入图片描述
2.2.之前提到的安装宝塔的命令要在这里输入,安装过程中需要确认一下,实用教程中都提示了,记得输入y,也可以直接去宝塔官网获取对应的下载命令
宝塔官网:

https://www.bt.cn/

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.3:安装成功后如下图,需要把路径,名称,密码记录下来
在这里插入图片描述
2.3.1:有个需要注意的点这里,安装宝塔成功后会给两个路径,直接点击后是打不开面板的,而且也没有下一步的高级选项,你需要在服务器的安全组中设置规则放开这个端口号
在这里插入图片描述
2.3.2: 点击下面的服务器名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.3.3:然后就可以通过外网链接打开面板了
如果还是打不开,下面是有个高级按钮,点击下面确认安全按钮即可进入
在这里插入图片描述
如果有下面的推荐,可以装一下,我也装了,随意,我是为了后期部署后端方便
在这里插入图片描述
这是我的全部安装
在这里插入图片描述

3.打包vue项目

复制dist目录,到下面目录,新建一个目录把dist复制到里面
路径一定别填错,要和我的一样,目录名随意

在这里插入图片描述
注意把这两个文件夹的权限改成777
在这里插入图片描述
复制进来之后的样子(这里的权限,随意,暂时没发现什么要求)

在这里插入图片描述

创建站点

部署前端,选择php就行,具体原因不解释了
在这里插入图片描述
点击提交
在这里插入图片描述
创建成功如下
在这里插入图片描述
要求是yxx文件夹下,必须有index.html目录,咱们复制的是整个dist,所以需要配置一下,
点击下图的设置–点击网站目录,先确认一下项目目录对不对,
重要的是配置运行目录
在这里插入图片描述

重要,重要,重要的来了:---------如果你想配置项目的端口需要在安全中放开这个端口(就是配置规则),同时也要在服务器安全组---安全规则中设置该端口号,服务器要和宝塔同时配置才能生效 

默认80等是放开的,不修改的话项目使用的是80端口
在这里插入图片描述
这样项目就配置好了,接下来运行

运行项目

如果刚开始,你不知道如何运行项目,如下图
点击网站中的,网站名,再点击域名即可运行了
在这里插入图片描述
运行成功自己的项目,记住网址即可
在这里插入图片描述
以上就是全部过程了,如有问题或者需要帮助可在评论区告知!

相关内容

热门资讯

黑科技计算!德扑之星辅助器,太... 黑科技计算!德扑之星辅助器,太夸张了确实是有挂(透视)软件教程(2020已更新)(哔哩哔哩)所有人都...
黑科技实锤(德州微扑克专用)外... 黑科技实锤(德州微扑克专用)外挂透明挂辅助黑科技(透视)安装教程(2025已更新)(哔哩哔哩);1、...
黑科技功能(WPK)外挂透明挂... 黑科技功能(WPK)外挂透明挂黑科技辅助挂(透视)规律教程(2026已更新)(哔哩哔哩),您好,WP...
黑科技好友房(德州ai智能)外... 黑科技好友房(德州ai智能)外挂透明挂辅助神器(透视)高科技教程(2020已更新)(哔哩哔哩)1、德...
黑科技总结!wpk辅助插件,太... 黑科技总结!wpk辅助插件,太坑了竟然有挂(透视)细节揭秘(2020已更新)(哔哩哔哩)1、实时wp...
黑科技最新(AAPOker)外... 黑科技最新(AAPOker)外挂透明挂黑科技辅助神器(透视)曝光教程(2024已更新)(哔哩哔哩)A...
黑科技能赢(德州之星ai)外挂... 黑科技能赢(德州之星ai)外挂透明挂辅助app(透视)透视教程(2025已更新)(哔哩哔哩);1、完...
黑科技计算!德扑之星有作弊,太... 黑科技计算!德扑之星有作弊,太夸张了好像有挂(透视)黑科技教程(2020已更新)(哔哩哔哩);1、这...
黑科技ai(来玩app德州)外... 黑科技ai(来玩app德州)外挂透明挂黑科技辅助代打(透视)2025新版总结(2024已更新)(哔哩...
辅助黑科技!wepoke真的有... 辅助黑科技!wepoke真的有挂,太嚣张了总是真的有挂(透视)高科技教程(2020已更新)(哔哩哔哩...