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

--