jenkins实现vue前端自动部署

1.配置nodejs

https://nodejs.org/dist/ 下选择自己需要的版本下载。
我使用8，页面上会出现如下版本供选择。

• node-v8.16.0-linux-arm64.tar.gz
• node-v8.16.0-linux-arm64.tar.xz

gz和xz格式无所谓，只是压缩方式的不同

下载后解压到服务器下合适的目录。接下来登录jenkins配置，系统管理–》全局工具配置

找到nodejs，新增，安装目录选择自己解压后的nojs目录。如果看不到nodejs这块，需要安装插件NodeJS Plugin插件。

完成后保存。

2.配置job

新建任务，构建自由风格的软件项目。

我使用是的git管理代码，如果想在构建前自行选择版本，可按照如下步骤，否则跳过。
需要安装git parameter 插件。

这样在构建时会先让你选择一个代码分支。

继续，接下来配置代码版本库

接下来是构建环境设置

构建设置

自动将编辑后的文件传输到目标服务器指定目录，并执行部署操作。如果没有维护ssh server 按照如下步骤
系统管理–》系统设置
找到 Publish over SSH，如果没有去找相关插件。

继续将编辑后的文件传输到目标服务器指定目录，并执行部署操作

要注意：
构建后的文件目录结构（很重要，一定要搞清楚）：
-dist
|- - dist
|- - - -*.js,*.*等文件
|- - index.html
配置时如果对目录结构或参数含义不清楚特别容易出现无法复制的情况，还很难找到原因。
配置中各参数说明：

• source files 源文件，目录是jenkins下该任务的根目录，我们构建vue的dist目录就在这个根目录下，直接使用dist/*即可找到index文件，生成的文件中有两部分，index.html和子目录dist（里面是js等）；* 意思是任意多个字符，**代表所有文件
• remote prefix 复制文件时，拷贝到目的主机时相对源文件目录要忽略的前缀，这里设置了dist/意思是拷贝时拷贝第一层dist/下的所有文件，包括 index.html和第二层dist下的所有文件
• remote directory 远程目录，此处是针对于我们设置的ssh server根目录来说的相对路径，切记！
• exec command 执行命令 可以调用服务器上的脚本执行部署操作。这里我就用来备份原服务器文件、将新文件从服务器上传目录移动到nginx下的项目目录。然后重启nginx。