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

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

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

前提条件

• 已安装和配置Cloud Toolkit，请参见在Visual Studio Code中安装和配置Cloud Toolkit。

• 已准备好支持标准SSH标准协议的服务器。

部署应用到远程服务器

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

1. 在Visual Studio Code中导入您的本地应用。

2. 添加服务器。

   1. 在左侧菜单栏中单击阿里云图标，然后在ALIBABA CLOUD TOOLKIT侧边栏中选择ALIBABA CLOUD VIEW > Host View。

   2. 在弹出的Host页签中单击Add Host。

   3. 在Add Host对话框中设置Host List、Port和SSH Profile后，单击Test Connection测试是否能成功连接服务器。

3. 部署应用。

   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命令检查是否部署成功。登录远程服务器操作步骤如下：

1. 在左侧菜单栏中单击阿里云图标，然后在ALIBABA CLOUD TOOLKIT侧边栏中选择ALIBABA CLOUD VIEW > Host View。

2. 在Host View页签中单击目标远程服务器Actions列的Terminal，登录远程服务器。