正文

在azuredevopsserver(tfs)中实现vue项目的自动打包(代码片段)

danzhang  danzhang  2022-12-22  684

关键词：

概述

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

代理服务器配置

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

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

安装TFS（2015）工作组模式代理服务器(Agent)：https://www.cnblogs.com/danzhang/p/6136149.html
在Windows 7上安装Team Foundation Server（TFS）的代理服务器（Agent)：https://www.cnblogs.com/danzhang/p/6882478.html
为TFS配置跨平台的生成服务器Xplat (Ubuntu Linux) ：https://www.cnblogs.com/danzhang/p/5274284.html

由于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的打包，基本分成下面几个步骤：

下载源代码
下载依赖包文件
运行Vue生成脚本（NPM run）
其他TFS必要的步骤

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

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

其他：package.json

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

dependencies节点包含了项目需要的所有依赖包
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 张洪君

重写azuredevopsserver(tfs)中的git版本记录(代码片段)

Contents1.概述2.应用场景一：修改某开发人员的电子邮件3.应用场景二：删除服务器中的大文件4.用户场景三：整理代码库的目录结构4.常见问题 1.系统提示![rejected]，没有权限 2.其他开发人员拉取（PULL)代码时，出... 查看详情

azuredevopsserver：git权限设置

AzureDevOpsServer权限概述在AzureDevOpsServer(之前名称为TFS）中，权限是一个比较复杂的概念。从权限层级上来说，包括服务器级别、团队项目集合级别、团队项目级别和对象级别。其中的对象级别，是指对TFS系统中具体的每种类型的... 查看详情

将 TFS2017.3 升级到 Azure DevOps 服务器

...S2017.3升级到AzureDevOps服务器【英文标题】：UpgradeTFS2017.3toAzureDevOpsServer【发布时间】：2020-09-0410:54:57【问题描述】：我正在尝试将我的TFS2017Update3环境升级到新的AzureDevOpsServer（本地）环境。我为AzureDevOpsServer创建了一个新服务器... 查看详情

TFS 上的在线协作

...题讨论】：您使用的是哪个版本的TFS？【参考方案1】：AzureDevOpsServer2020Update1RC1及更高版本具有工作项的实时更新。如果您更改其他人在查看模式下打查看详情

将 TFS 2017 更新 1 升级到 Azure DevOps Server 2019 更新 1.1 的最佳做法是啥？

】将TFS2017更新1升级到AzureDevOpsServer2019更新1.1的最佳做法是啥？【英文标题】：WhatisthebestpracticetoupgradeTFS2017update1toAzureDevOpsServer2019update1.1?将TFS2017更新1升级到AzureDevOpsServer2019更新1.1的最佳做法是什么？【发布时间】：2020-10-0614:33... 查看详情

返回 Azure DevOps Server (TFS) 中管道的旧视图

】返回AzureDevOpsServer(TFS)中管道的旧视图【英文标题】：ReturnanoldviewofpipelinesinAzureDevOpsServer(TFS)【发布时间】：2021-07-1410:04:00【问题描述】：我正在使用AzureDevOps版本Dev18.M170.8。在这个版本中，运行管道真的不合适：我必须多点击2... 查看详情

如何在 azure devops server 2019 的新工作项 Web 布局中编程工作项水平选项卡？

】如何在azuredevopsserver2019的新工作项Web布局中编程工作项水平选项卡？【英文标题】：Howprogramworkitemhorizotaltabsinthenewworkitemweblayoutofazuredevopsserver2019?【发布时间】：2020-08-2218:20:02【问题描述】：我在本地使用TFS2017更新1，现在我... 查看详情

tfs2019创建新项目很慢

...决不够及时导致创新项目进展很慢。微软在2019年5月发布AzureDevOpsServer2019后不到2个月的时间里，就快速准备好了第一个升级包(2019Update1)，并计划在几周后发布正式版本。也许你还没来得及升级TFS，也许你还在观望，但是这个版... 查看详情

集成 TFS 版本控制的最佳方法是啥

...时间】：2010-09-0909:03:24【问题描述】：致力于在整个组织中实施TFS。它很容易与.NET项目和任何使用Eclipse或Eclipse衍生版本进行编辑的平台集成。在Xcode中使用TFS版本控制的最佳方式是什么（现在我发现我们需要编写一些iPhon 查看详情

azuredevopsserver2022.0.1升级手册

...法2.1安装操作系统2.2安装数据库2.4还原数据2.3安装和配置AzureDevOpsServer1.概述AzureDevOpsServer是微软公司经过20多年的持续开发，逐渐将需求管理、敏捷实践、源代码管理、持续集成等功能集成一体，实现应用软件生命周期全流程服... 查看详情

azuredevopsserver数据还原方式三：增量还原

...写正确的数据库服务器地址4.3数据库已经存在1.概述还原AzureDevOpsServer的全量备份数据库，可以手动在SQLServerManagementStudio中操作；但是如果需要还原增量数据库，必须使用AzureDevOpsServer的控制台。本文主要介绍还原增量数据备份... 查看详情

azuredevopsserver：还原被删除的分支

1.概述本文介绍通过AzureDevOps中的Web服务恢复已删除的Git分支。如果需要从VisualStudio或命令行中恢复自己的repo中的git分支，请将分支从本地repo推到Azurerepo以恢复它。2.操作步骤1）使用浏览器打开代码库的分支视图2）在“搜索所... 查看详情

azuredevopsserver：使用postman批量删除测试用例

手动删除测试用例在AzureDevOpsServer中，使用网格功能，可以快速批量的将本地Excel文件中的测试用例导入到服务器中，这个功能为测试人员带来了巨大的便利性。但是如果不小心，由于误操作重复批量导入了批量测试用例，如果... 查看详情

Azure Pipeline 运行不会自动删除

...用两个自托管的Windows代理来运行这些构建，并且我们在AzureDevOpsServer2020上。自从我们开始运行管道以来，我们注意到我们的查看详情

Azure DevOps 服务器 - 如何将现有集合/项目迁移到 SCRUM

...ps服务器-如何将现有集合/项目迁移到SCRUM【英文标题】：AzureDevOpsServer-Howtomigrateexistingcollection/projecttoSCRUM【发布时间】：2020-05-0309:27:18【问题描述】：我们确实将TFS2013Update2升级到AzureDevOpsServer（本地），我们不知道我们的所有... 查看详情

如何在 TFS 2017 上运行项目备份

】如何在TFS2017上运行项目备份【英文标题】：HowtorunabackupofprojectsonTFS2017【发布时间】：2020-10-3105:28:22【问题描述】：我正在寻找在TFS2017上备份我的项目的方法或策略。我没有做完整备份/增量备份或差异备份的工具。我将不胜... 查看详情

在发布 TFS 中发布文件

】在发布TFS中发布文件【英文标题】：PublishfileinareleaseTFS【发布时间】：2018-05-0708:50:30【问题描述】：我正在尝试使用TFS中的发布，我添加了一个任务“复制发布工件”来发布将在发布中生成的文件，它给了我错误：##[error]System... 查看详情

在 TFS 构建中运行 Specflow 测试

】在TFS构建中运行Specflow测试【英文标题】：RunningSpecflowtestsinTFSBuild【发布时间】：2013-09-2115:34:06【问题描述】：如何让我的TFS构建运行我的Specflow测试？我在本地VS构建中运行了测试，但它们没有在TFS构建中被拾取。请有人发布... 查看详情