首页 > 编程语言 >DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

时间:2024-06-13 14:32:52浏览次数:10  
标签:Node node Pipeline Vue 构建 解压 npm https 镜像

场景

DockerCompose+Jenkins+Pipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/139631755

以上使用流水线配置和打包springboot后台项目,如果要使用流水线和配置node打包vue项目,

可按如下步骤。

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi

实现

1、按照上面博客步骤搭建jenkins并安装node插件。

 

2、下载node的linux的离线压缩包

下载地址:

https://nodejs.org/en/blog/release

这里项目编译使用的node的版本是14.16,所以下载指定版本的压缩包

https://nodejs.org/en/blog/release/v14.16.1

下载linux上64位版本,比如这里是node-v14.16.1-linux-x64.tar.xz

然后将其解压并移动到jenkins容器映射路径下的tool目录下,使解压后的bin目录位于tool下的node目录下

 

这里是在windows下,所以使用解压软件管理员模式运行,如果是linux上直接运行解压命令,使路径

同上面一致即可。

3、全局工具配置-NodeJS安装

新增NodeJS,别名这里叫node,记住这个别名,后续与jenkinsfile中tool一致。

然后安装路径为

/tool/node

 

4、配置npm的镜像源为淘宝镜像源

为了提高下载依赖的速度,需要修改npm的镜像源

系统管理-Managed files-Add a new Config

选择类型为Npm config file

 

记住生成的配置文件的id和名称,后面会用到

 

然后就可以在配置文件的Content中进行npm的配置修改了。

比如这里修改镜像源为淘宝镜像

 

将registry修改为如下

registry = https://registry.npmmirror.com

然后提交保存。

5、新建任务-流水线项目,配置gitee地址,SCM以及git凭证与上面一致

 

然后在前端代码仓库的根目录下新建Jenkinsfile文件

然后修改内容为:

pipeline {
    agent any
 tools {
        nodejs 'node'
    }
    stages {
  stage('编译构建') {
            steps {
             nodejs(nodeJSInstallationName: 'node', configId: '14997e88-6fc1-42bb-b9e8-bc54fe8aff81') {
                    // npm 编译安装
                    sh 'node -v'
                    sh 'npm install'
                    sh 'npm run build:prod'
             }
            }
        }
    }
 post {
        always {
            echo '构建结束,结果:'
        }
  success {
            echo '构建成功'
        }
  failure {
            echo '构建失败'
        }
    }
}

注意这里的tools中左边是nodejs固定的,右边是对应上面安装node时的别名。

然后下面配置nodejs时nodeJSInstallationName也是指定node的别名,后面configId指定上面添加全局配置文件

时生成的id,代表npm会使用这个配置文件。

后面就是跟的具体的构建指令。

6、点击立即构建测试效果

第一次构建需要加载依赖,时间较长

 

构建成功之后会在相应的映射目录下生成dist包文件。

7、踩坑记录

构建时提示:

Error: Cannot find module '../lib/utils/unsupported.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)

 

需要将容器停掉,然后将映射路径下node下面所有文件删除,然后重新解压移动一遍,再重新启动容器。

如果是在linux上,则卸载重装node。

构建时提示:

request to https://registry.npm.taobao.org/...failed,reason:certificate has expired

 

这是因为一开始配置的淘宝镜像不对,网上较老的教程写的淘宝镜像过期了!

在 2021 年,淘宝就发文称,npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com。

旧域名也将于 2022 年 5 月 31 日停止服务(不过,直到今天 HTTPS 证书到期才真正不能用了)。

标签:Node,node,Pipeline,Vue,构建,解压,npm,https,镜像
From: https://www.cnblogs.com/badaoliumangqizhi/p/18245808

相关文章

  • vue代办事件案例实战练习,配有答案解析
    代办事件案例该案例,综合了前面所学的知识,列入点击事件绑定,双向绑定,v-for循环语句,v-model双向绑定,以及input标签的不同type形式。演示代码如下:<template><divid="kuagjia"><div><divclass="top"><spanstyle="margin-left:-700px;">学习计划表......
  • vue项目中axios封装(数据请求封装)
    一、定义utils(工具类)目录,并创建两个文件,request.js与http.jsrequest.js用于创建axios,并在请求/响应拦截时对需要传递的数据进行处理。//引入axiosimportaxiosfrom'axios'//使用前要先安装依赖:npminstallaxios//引入element-ui信息import{Message}from"elemen......
  • java+vue3+el-tree实现树形结构操作
    基于springboot+vue3elementPlus实现树形结构数据的添加、删除和页面展示效果如下代码如下,业务部分可以自行修改java后台代码importcom.baomidou.mybatisplus.core.conditions.query.QueryWrapper;importcom.daztk.mes.common.annotation.LogOperation;import......
  • 基于Java+Vue的智慧园区管理系统:推动新技术与办公场景的深度融合(源码分享)
     前言:智慧园区管理平台是一个集成了多种功能的综合性系统,旨在通过信息化、智能化手段提升园区的管理效率和服务质量。以下是针对系统的各个功能模块的简要描述:一、楼栋管理会务管理:管理园区内的会议预约、会议室使用等。园区信息:展示园区的基本信息,如位置、面积、规划等。......
  • 基于Java+Vue的企事业移动培训考试平台:提升员工能力,助力文化传递(源码分享)
    前言:企事业移动培训考试平台是一个集成多种功能的综合性平台,旨在为企业提供便捷、高效、灵活的在线培训和考试解决方案。以下是针对平台所列出的八个主要功能的详细解释:一、文档管理及在线预览允许企业上传、存储、管理和分享各种培训文档,如PPT、PDF、Word等。提供在线预览......
  • JsSIP+FreeSwitch+Vue实现WebRtc音视频通话
    效果让同事帮我测的,在两个电脑分别打开该页面,一个注册1007分机号,另一个注册1005,然后拨打视频电话依赖版本jssip:3.6.1freeswitch:1.10.5-release~64bitvue:2.6.12488错误解决在freeswitch配置文件sip_profiles/internal.xml中添加:<paramname="apply-can......
  • vue3 修改element-plus主题颜色(css版)
    vue3修改主题颜色_若依vue3改默认主题色-CSDN博客上面的是js修改-----------------------------------------------------------------------------------------------------------------------1.新建一个APPStyle.css文件代码/*8这里是要替换的样式,可以参开下面注释......
  • 国思RDIF.vNext全新低代码快速开发框架平台6.1版本发布(支持vue2、vue3)
    1、平台介绍RDIF.vNext,全新低代码快速开发集成框架平台,给用户和开发者最佳的.Net框架平台方案,为企业快速构建跨平台、企业级的应用提供强大支持。RDIF.vNext的前身是RDIFramework框架,RDIF(RapiddevelopIntegrateFramework,vNext代表全新下一代),全新设计,全新开发,代码量减......
  • vue3探索——在setup script中使用tsx语法
    vue3+ts+eslint配置tsxvite.config.ts安装@vitejs/plugin-vue-jsx#npmnpmi@vitejs/plugin-vue-jsx-D#yarnyarnadd@vitejs/plugin-vue-jsx-D#pnpmpnpmadd@vitejs/plugin-vue-jsx-D在vite.config.ts中使用……importvueJsxfrom'@vitejs/plugin-vue......
  • [vue2]深入理解vuex
    本节内容概述初始化仓库定义数据访问数据修改数据处理异步派生数据模块拆分案例-购物车概述vuex是一个vue的状态管理工具,状态就是数据场景某个状态在很多个组件使用(个人信息)多个组件共同维护一份数据(购物车)优势数据集中式管理数据响应式变化初始化仓库......