jenkins构建前端vue项目

目录

前言：

1.jenkins配置参数

2.构建前端代码脚本

3.额外补充相关配置

---

前言：

服务器，已部署nginx和jenkisn和npm，在此基础上部署前端项目，

后续补充相关nginx等服务器安装操作；

扫描二维码关注公众号，回复： 16459833 查看本文章

1.jenkins配置参数

1.新增一个软件项目

 2.新增项目描述

3.配置历史镜像处理规则

例如：一个构建任务最多保留30天，最多保留10个构建任务

 4.配置项目构建目标服务器

 5.配置前端代码地址，以及构建的分支

 6.配置前端代码存放地

7.配置前端编译代码脚本路径

配置临时变量，以及执行目标路径下的脚本，进行编译前端代码

 

2.构建前端代码脚本

#!/bin/bash
#1打包前端
echo "package demoWeb..."
#前端代码存放地
cd /app/autopackage/demo/dev/code/demo

#借助npm实现拉取、构建等
export nodejieba_binary_host_mirror=http://前端部署服务器ip/npm/nodejieba/
#信任非http连接,配置node所在路径
NODE_DIR=/app/autopackage/pck_env/node14/bin

#清楚缓存
$NODE_DIR/npm cache clean --force
$NODE_DIR/node $$NODE_DIR/npm config set unsafe-perm=true
$NODE_DIR/node $NODE_DIR/npm fund
$NODE_DIR/node $NODE_DIR/npm run build

echo "package demoWeb...end"

3.额外补充相关配置

1.如果构建失败或者提示node相关问题，可在代码所在位置配置node_modules

2.查看npm配置路径

npm config get prefix

3.查看nodehe npm版本

node -v

npm -v

4.查找nodel modul路径

npm root -g

npm bin -g

5.升级node

npm install -g -n

或者安装

npm install

6.nginx 配置相应端口号映射编译代码

主要新增一个nginx文件

主要配置server如下：

server{

        listen 9091;#外部访问端口

        server_name localhost；

        location /{

                root  /app/autopackage/demp/code/demo/dist/project;#前端编译代码所在地

                index index.html;#前端首页

                try_files $uri $url/ /app/autopackage/demp/code/demo/dist/project/index.html;#报错找不到页面404可加载此配置

        }

}

 

 可参考文章nginx配置