脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → jenkins自动化部署vue

详解jenkins自动化部署vue

 更新时间：2019年05月14日 10:52:57   作者：jonsonler  
这篇文章主要介绍了jenkins自动化部署vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、nodejs配置

首先加入nodejs插件
–>–>

 

在配置里面配置这个插件
–>


这样我们就能在自动构建发布的配置里看到nodejs的编译选项了

二、发布配置

首先新建一个自由风格的项目

然后配置构建保留天数和参数化构建
这里选择在svn上的资源，配置好访问的用户信息

 

这样我们在构建的时候能看到项目的不同版本

接下来选择构建的数据源位置

echo $PATH
node -v
npm -v
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build
cd dist
rm -rf vue-mall.tar.gz
tar -zcvf vue-mall.tar.gz *
cd ../


cd /usr/local/nginx/html
rm -rf mall
mkdir mall
tar -zxvf vue-mall.tar.gz -C mall/
rm -rf vue-mall.tar.gz

ssh server的配置如下

–>

三、遇到的问题

①npm代理问题
在jenkins的服务器上设置npm config

#可以访问外网的代理ip地址和端口
npm config proxy=http://ip:port
npm config https-proxy=http://ip:port
#镜像选择淘宝的镜像
npm config set registry=http://registry.npm.taobao.org
npm info underscore （如果上面配置正确这个命令会有字符串response）

②chromedriver@2.37.0 install: `node install.js

这里我们在上面的构建中已经有体现，加上如下命令

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

以上所述是小编给大家介绍的jenkins自动化部署vue详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue中el-tree动态初始默认选中和全选实现方法

    vue中el-tree动态初始默认选中和全选实现方法

    这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下
    2023-09-09
  • vue3界面使用router及使用watch监听router的改变

    vue3界面使用router及使用watch监听router的改变

    vue2中使用router非常简单，但是vue3中略微有些改变，通过本文讲解下他的改变，对vue3 watch监听router相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • vue3结合hooks开发可以注册的二次确认弹框

    vue3结合hooks开发可以注册的二次确认弹框

    这篇文章主要为大家介绍了vue3结合hooks开发可以注册的二次确认弹框，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • Vue中使用canvas方法总结

    Vue中使用canvas方法总结

    在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。
    2019-02-02
  • 构建Vue3桌面应用程序的方法

    构建Vue3桌面应用程序的方法

    在项目中会用到 Electron ， 一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目，感兴趣的可以了解一下
    2021-05-05
  • 在vue项目中引入highcharts图表的方法

    在vue项目中引入highcharts图表的方法

    今天小编就为大家分享一篇关于在vue项目中引入highcharts图表的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 如何在ElementUI的上传组件el-upload中设置header

    如何在ElementUI的上传组件el-upload中设置header

    这篇文章主要介绍了如何在ElementUI的上传组件el-upload中设置header，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue实现登陆功能

    vue实现登陆功能

    这篇文章主要为大家详细介绍了vue实现登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3自己封装面包屑功能组件的几种方式

    vue3自己封装面包屑功能组件的几种方式

    网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面,这是一个非常实用的功能,也是在Web前端必备的导航UI之一,这篇文章主要给大家介绍了关于vue3自己封装面包屑功能组件的几种方式,需要的朋友可以参考下
    2021-09-09
  • vue实现购物车结算功能

    vue实现购物车结算功能

    这篇文章主要为大家详细介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06

最新评论