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

概述

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

代理服务器配置

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

能够在Windows或Linux服务器上安装DevOps Server的代理程序，并链接到服务器，具体过程再也不这里赘述，能够查看个人相关博客

• 安装TFS（2015）工做组模式代理服务器(Agent)：http://www.javashuo.com/article/p-bapgyhps-gm.html
• 在Windows 7上安装Team Foundation Server（TFS）的代理服务器（Agent)：http://www.javashuo.com/article/p-qjrtaelx-gx.html
• 为TFS配置跨平台的生成服务器Xplat (Ubuntu Linux) ：http://www.javashuo.com/article/p-rumniiox-hb.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的打包，基本分红下面几个步骤：

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 张洪君

--