码迷,mamicode.com
首页 > Web开发 > 详细

在Azure DevOps Server (TFS)中实现VUE项目的自动打包

时间:2019-06-22 10:34:08      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:ice   main   icc   vue-cli   test   脚本   代理服务   set   固定   

概述

Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。
由于它在数据绑定、页面展示和使用简单方面有很大的优势,逐渐被越来越多的前端开发团队使用。
本文介绍基于Azure DevOps Server,如何实现Vue框架前端代码的编译和打包。

代理服务器配置

Azure DevOps Server的自动化流水线,都基于代理服务器Agent Server,需要在你的代理服务器上安装部署好VUE自动打包所需要的环境,这里主要说明如何安装VUE需要Nodejs环境。

可以在Windows或Linux服务器上安装DevOps Server的代理程序,并连接到服务器,具体过程不再这里赘述,可以查看我的相关博客

由于Vue的编译打包过程需要使用Nodejs,需要在代理服务器上首先安装Nodejs

技术图片

配置NPM镜像库和代理服务器

如果内网使用代理上网,需要配置代理服务器,配置如下:

npm config set proxy=http://proxy.youcompanydomain.com.cn:8080

默认的NPM镜像库在国外,我们还可以使用国内的镜像库,配置如下:

npm config set registry http://registry.npm.taobao.org/

如果需要取消代理,可以使用下面的脚本:

npm config delete proxy
下载必要的依赖包

如果代理服务器不能连接互联网,也没有搭建内网NPM私服,需要我们手动将依赖包上传到代理服务器中。
我们的实验环境就是这种情况,客户是一家金融企业,内网环境与互联网完全隔离,只能先在笔记本电脑上下载必要的依赖包,再通过其他途径将依赖包上传到代理服务器中。
由于项目依赖的包多,同时,由于依赖包文件数量巨大,近4万个文件,复制或压缩都需要很长时间;即使使用NPM私服,下载这些依赖包也需要很长时间,所以我们将包文件复制到代理服务器上固定的位置(与代理程序在同一个分区中),在流水线中使用文件移动的方式方式,将依赖包复制到代码文件夹中,这样大幅提高了编译的效率。

配置Azure DevOps 流水线

Vue的打包,基本分成下面几个步骤:

  1. 下载源代码
  2. 下载依赖包文件
  3. 运行Vue生成脚本(NPM run)
  4. 其他TFS必要的步骤

技术图片

其他压缩和发布的步骤,就不再截屏了。

下面是执行成功的结果截图:

技术图片

其他:package.json

下面是package.json文件的示例
主要需要注意以下几点:

  1. dependencies节点包含了项目需要的所有依赖包
  2. scripts节点包含了项目中的任务,例如我们执行npm run build,实际上就是执行build指定的脚本“vue-cli-service build”,这是vue提供的功能
{
  "name": "product_frontend",
  "version": "1.0.0",
  "author": "picc",
  "private": false,
  "scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "clipboard": "^2.0.0",
    …省略  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.1",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-plugin-unit-mocha": "^3.5.1",
    "@vue/cli-service": "^3.5.1",
    "@vue/eslint-config-standard": "^3.0.0-beta.10",
    "@vue/test-utils": "^1.0.0-beta.10",
    …省略  },
 …省略
    ]
  }
}

http://www.cnblogs.com/danzhang/  DevOps MVP 张洪君

--

在Azure DevOps Server (TFS)中实现VUE项目的自动打包

标签:ice   main   icc   vue-cli   test   脚本   代理服务   set   固定   

原文地址:https://www.cnblogs.com/danzhang/p/11067625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!