部署Vue前端项目——华为云

一 、打包项目

在Vue项目路径下打开终端，输入

npm run build 

打包项目，打包完成后会出现一个dist文件夹。

二、申请华为云服务器

注册华为账户（购买服务器时后续会有提示，需要实名认证）
https://console.huaweicloud.com/

创建并购买弹性云服务器

计费模式——按需计费

CPU架构——鲲鹏计算（1vCPUs/1GiB）

系统——CentOS

云服务器管理——设置root密码

其余选项默认。

点击“立即购买”，如果提醒账户余额不足的话需要充值（先充1元就可以）。

返回云服务器列表

创建后即开机收费，后续点击“关机”就不扣费了。

点击远程登录->选择立即登录。

如果提示没有22端口，需要设置安全组的话，则点进去设置：

输入root的密码进行连接： 

成功：

三、安装并配置XFTP

安装XFTP

官网下载xftp——用于后续与服务器之间传输dist文件夹
xftp-30天试用
https://www.xshell.com/zh/xftp-download/

默认安装即可。

安装完成后点击文件->新建： 

填写信息：

名称：随意

主机：弹性公网IP

用户名：root

密码：root的密码

点击“连接”。

接受并保存。

先不要关闭XFTP，后续会使用。

四、安装宝塔面板

因为我们服务器部署的是Centos系统，所以这里选择的是Centos安装脚本。

宝塔面板下载，免费全能的服务器运维软件

复制命令到服务器终端安装：

出现下面界面则表示已经安装成功了，并且要记住宝塔外网面板地址和账号密码，后面登录宝塔面板会用到。

五、在服务器安全组中为宝塔配置端口

（我这里是24057的端口，你那里要配置自己的端口号）

六、宝塔Linux面板的基本使用（在本地电脑上）

 宝塔部分参考博客：https://blog.csdn.net/SoloVersion/article/details/123984445

1.登录宝塔面板：

在浏览器地址栏中输入刚刚记录的外网面板地址，

如果出现不安全提示->点击隐私->高级->继续访问。

输入之前记录的账户名和密码，登录：

 2.绑定宝塔官网账号

有宝塔账号就直接登录，没有需要用手机号注册宝塔账号：

登陆成功后选择安装套装
首次使用宝塔面板推荐安装一组套件，对于刚接触Linux环境部署的博友们，推荐使用LNMP，采用极速安装、一键安装的方式

LNMP和LAMP环境主要的区别在于web服务器上面，LNMP使用的是Nginx服务器，而LAMP使用的是Apache服务器。Nginx 性能稳定、功能丰富、运维简单、处理静态文件速度快且消耗系统资源极少。
安装慢的话，我们只安装Nginx，因为我们这里只是个前端的Vue项目，没有涉及到数据库和后端。

等待安装完成。

点击“添加站点”

点击右边的“设置”：

使用XFTP将dist文件夹移动到网站目录下：

修改站点网站目录： 

保存，重启nginx：

在地址栏输入网址：http://113.45.131.150/#/login   （113.45.131.150为公网IP，/#/login为项目的login路径）

测试：

账号：admin
密码：123456

成功！