任务目的

将 Vue 项目部署到 Linux 实例。开发完成的 Vue 项目要能够被其他设备访问，需要经过构建后部署到服务器上。

任务步骤

1.构建 Vue 项目

进入 VS code 界面，在终端中执行以下命令。

npm run build

构建后的文件位于“login”文件夹下的“dist”目录下。

2.部署 Vue 项目

Vue 项目构建成功后需要将构建后的文件部署到 Linux 实例上，本示例选择使用 FileZilla。

前往FileZilla 下载页面，下载软件安装包。等待安装包下载完成，找到安装包并双击开始安装软件。选择默认配置，安装完成后双击图标打开软件。

采用 SFTP 的方式连接主机。点击左上角的图标添加站点。

【协议】选择【SFTP - SSH File Transfer Protocol】，【主机】填入 Linux 实例的公网 IP，【用户】和【密码】填入 Linux 实例的用户名“root”和密码“Welcome2Tencent”。点击【连接】按钮。

将本机位于“login”文件夹下的“dist”文件夹里的全部文件上传到 Linux 实例的“/usr/share/nginx/html”文件夹下。

远程登录 Linux 实例，执行以下命令重启 Nginx。

systemctl restart nginx

3.实验验证

打开本机的浏览器输入 CVM 公网 IP 后按下回车键。可以访问到登录界面。