前端vue项目在vscode使用插件部署到服服务器的方法

使用Visual Studio Code部署应用到远程服务器

Cloud Toolkit支持将应用部署到采用SSH标准协议的服务器，您无需在一系列运维工具之间切换，只需在图形界面上选择目标服务器即可快速部署。

前提条件

已安装和配置Cloud Toolkit，请参见在Visual Studio Code中安装和配置Cloud Toolkit。
已准备好支持标准SSH标准协议的服务器。

部署应用到远程服务器

您可以使用一个本地应用来完成部署工作，具体步骤如下：

在Visual Studio Code中导入您的本地应用。
添加服务器。
1. 在左侧菜单栏中单击阿里云图标，然后在ALIBABA CLOUD TOOLKIT 侧边栏中选择ALIBABA CLOUD VIEW > Host View。
2. 在弹出的Host 页签中单击Add Host。
3. 在Add Host 对话框中设置Host List 、Port 和SSH Profile 后，单击Test Connection测试是否能成功连接服务器。
部署应用。
1. 单击ALIBABA CLOUD TOOLKIT 侧边栏中RUN CONFIGURATIONS 旁边的**...** 图标，选择Deploy to Host。
2. 在Deploy HOST View 页签中设置部署参数，然后单击Apply。
  - Deployment（必选）：
    
    部署参数说明如下表所示：
    
    |----------------------|-----------------------------------------------------------------------------------|
    | 参数 | 描述 |
    | Name | 为此次配置定义一个名字，以便区分多个配置。 |
    | File | 在以下打包方式中选择：npm build 、Webpack build 或Upload file。 |
    | Project | 选择待部署工程的根目录。打包方式选择npm build 和Webpack build时需要配置。 |
    | Build Output | 打包之后的Output目录。打包方式选择npm build 和Webpack build时需要配置。 |
    | Scripts | 选择脚本命令，仅当打包方式选择npm build时需配置。 |
    | Webpack | Webpack配置，选择一个Webpack脚本，仅当打包方式选择Webpack build时需配置。 |
    | File | 选择要上传文件的文件夹，仅当打包方式选择Upload file时需设置。 |
    | Target Host | 此次部署的远程目标服务器。 |
    | Target Directory | 远程目标服务器上的指定部署目录。 |
    | After deploy | 输入应用启动命令，表示在完成应用包的部署后，需要执行的命令。以Java程序为例，通常是一句Tomcat的启动命令，如sh /root/restart.sh。 |
  - Advanced （可选）：在设置页面完成启动命令和部署后命令的设置，设置完成后单击Apply。

结果验证

部署开始后，Visual Studio Code的Console区域会打印部署日志，您可以根据日志信息检查部署结果。

您还可以通过内置Terminal终端登录远程服务器，cd至部署路径下，然后执行ls命令检查是否部署成功。登录远程服务器操作步骤如下：

在左侧菜单栏中单击阿里云图标，然后在ALIBABA CLOUD TOOLKIT 侧边栏中选择ALIBABA CLOUD VIEW > Host View。
在Host View 页签中单击目标远程服务器Actions 列的Terminal，登录远程服务器。