目录
前言：
1.jenkins配置参数
2.构建前端代码脚本
3.额外补充相关配置
前言：
服务器，已部署nginx和jenkisn和npm，在此基础上部署前端项目，
后续补充相关nginx等服务器安装操作；
1.jenkins配置参数
1.新增一个软件项目
2.新增项目描述
3.配置历史镜像处理规则
例如：一个构建任务最多保留30天，最多保留10个构建任务
4.配置项目构建目标服务器
5.配置前端代码地址，以及构建的分支
6.配置前端代码存放地
7.配置前端编译代码脚本路径
配置临时变量，以及执行目标路径下的脚本，进行编译前端代码
文章来源地址https://www.toymoban.com/news/detail-694069.html
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可加载此配置
}
}
文章来源：https://www.toymoban.com/news/detail-694069.html
可参考文章nginx配置
到了这里，关于jenkins构建前端vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
