在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)：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的打包，基本分成下面幾個步驟：

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

--