基於 vue-cli 腳手架生成專案模板基礎上做了些改動，加入了 vue-router ，vuex 等配套設施，本地 dev server 中加入了介面 mock 功能，還增加一個 build server 來預覽 build 結果頁面，前後端通過 spa 的方式實現分離，並相應做了分離後的聯調，部署方案。在這裡俺也對整個過程簡單做個介紹吧。

目錄結構

   ├── index.html                      入口頁面
    ├── build                           構建指令碼目錄
    │   ├── build-server.js                 執行本地構建伺服器，可以訪問構建後的頁面
    │   ├── build.js                        生產環境構建指令碼
    │   ├── dev-client.js                   開發伺服器熱過載指令碼，主要用來實現開發階段的頁面自動重新整理
    │   ├── dev-server.js                   執行本地開發伺服器
    │   ├── utils.js                        構建相關工具方法
    │   ├── webpack.base.conf.js            wabpack基礎配置
    │   ├── webpack.dev.conf.js             wabpack開發環境配置
    │   └── webpack.prod.conf.js            wabpack生產環境配置
    ├── config                          專案配置
    │   ├── dev.env.js                      開發環境變數
    │   ├── index.js                        專案配置檔案
    │   ├── prod.env.js                     生產環境變數
    │   └── test.env.js                     測試環境變數
    ├── mock                            mock資料目錄
    │   └── hello.js
    ├── package.json                    npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊
    ├── src                             專案原始碼目錄    
    │   ├── main.js                         入口js檔案
    │   ├── app.vue                         根元件
    │   ├── components                      公共元件目錄
    │   │   └── title.vue
    │   ├── assets                          資源目錄，這裡的資源會被wabpack構建
    │   │   └── images
    │   │       └── logo.png
    │   ├── routes                          前端路由
    │   │   └── index.js
    │   ├── store                           應用級資料（state）
    │   │   └── index.js
    │   └── views                           頁面目錄
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                          純靜態資源，不會被wabpack構建。
    └── test                            測試檔案目錄（unit&e2e）
        └── unit                            單元測試
            ├── index.js                        入口指令碼
            ├── karma.conf.js                   karma配置檔案
            └── specs                           單測case目錄
                └── Hello.spec.js
 

快速開始

git clone https://github.com/hanan198501/vue-spa-template.git
cd vue-spa-template
cnpm install
npm run dev

命令列表

#開啟本地開發伺服器，監控專案檔案的變化，實時構建並自動重新整理瀏覽器，瀏覽器訪問 http://localhost:8081
npm run dev

#使用生產環境配置構建專案，構建好的檔案會輸出到 "dist" 目錄，
npm run build

#執行構建伺服器，可以檢視構建的頁面
npm run build-server

#執行單元測試
npm run unit
 

前後端分離

專案基於 spa 方式實現前後端分離，後端將所有 url 都返回到同一個 jsp 頁面（由前端提供），此 jsp 頁面也是前端的入口頁面。然後路由由前端控制（基於vue-router），根據不同的 url 載入相應資料和元件進行渲染。

介面 mock

前後端分離後，開發前需要和後端同學定義好介面資訊（請求地址，引數，返回資訊等），前端通過 mock 的方式，即可開始編碼，無需等待後端介面 ready。專案的本地開發伺服器是基於 express 搭建的，通過 express 的中介軟體機制，我們可以很方便的新增介面 mock 功能：

在 build/dev-server.js 中新增介面 mock 處理：

// mock api requests
var mockDir = path.resolve(__dirname, '../mock');
fs.readdirSync(mockDir).forEach(function (file) {
  var mock = require(path.resolve(mockDir, file));
  app.use(mock.api, mock.response);
});

其中，mock 目錄下可能有個檔案內容如下，描述了一個介面的資料資訊：

module.exports = {

  // 介面地址
  api: '/api/hello',

  // 返回資料
  response: function (req, res) {
    res.send(`
      <p>hello vue!</p>
    `);
  }
}

元件化

整個應用通過 vue 元件的方式搭建起來，通過 vue-router 控制相應元件的展現，元件樹結構如下：

   app.vue                         根元件（整個應用只有一個）
        ├──view1.vue                    頁面級元件，放在 views 目錄裡面，有子元件時，可以建立子目錄
        │   ├──component1.vue               功能元件，公用的放在 components 目錄，否則放在 views 子目錄
        │   ├──component2.vue
        │   └──component3.vue
        ├──view2.vue
        │   ├──component1.vue
        │   └──component4.vue
        └──view3.vue
            ├──component5.vue
            ……

單元測試

可以為每個元件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結構建議和測試的檔案保持一致（相對於src），每個測試用例檔名以 .spec.js 結尾。執行 npm run unit 時會遍歷所有的 spec.js 檔案，產出測試報告在 test/unit/coverage 目錄。

前後端聯調

前後端分離後，由於服務端和前端的開發環境處於2臺不同的機器上，整個聯調過程，入口頁面需要引用前端機器的靜態資源，又要呼叫後端機器的非同步介面。根據入口頁面的位置，我們可以使用不同的聯調方案：

1. 入口頁面在前端機器：

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
});

最好通過啟動 dev-server 時傳入一個引數來控制是否開啟代理功能，這樣可以避免開發階段覆蓋掉我們的 mock 配置。

2. 入口頁面在後端機器： 後端工程裡面的入口 jsp 中引用的 js 檔案地址需要指向前端環境中的地址，聯調時才能顯示最新的修改。主要有2種實現方式： 1） jsp 檔案引用一個固定域名（如 debughost）的 js 檔案， 後端機器上通過修改此域名的ip指向前端機器，達到引入前端環境 js 的目的。 2） jsp 檔案通過獲取一個 url 引數（如 debughost）的值，這個值為前端機器的 ip 地址，再動態的插入一個 script 標籤引入這個 ip 的前端 js 檔案。

舉個例子，假設前端機器的 ip 為 172.16.36.90，需要載入前端的js檔案地址為：http://172.16.36.90:8081/main.js， 那麼後端同學的機器中需要在 host 檔案加一條記錄：

172.16.36.90 debughost

而入口 jsp 頁面中則通過以下程式碼開載入前端js：

   var debughost = 'debughost';
    location.search.substr(1).split('&').forEach(function (item) {
        var arr = item.split('=');
        var key = arr[0];
        var value = arr[1];
        if (key === 'debughost') {
            debughost = value;
        }
    });
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://' + debughost + ':8081/main.js?' + (new Date()).getTime();
    document.head.appendChild(script);

這樣，jsp 頁面預設會載入 http://debughost:8081/main.js這個檔案。 此外，如果不想用 debughost 這個域名的 js 檔案，訪問 jsp 時候還可以通過 url 帶入 debughost 引數來指定前端 ip 。

部署方案 分離後前後端程式碼會存放在2個單獨的 git 倉庫中，構建過程也是分開的。後端構建時，需要依賴前端的構建結果。具體流程如下：

1. 拉取前端專案程式碼 2. 構建前端（構建結果放在dist目錄） 3. 拉取後端程式碼 4. 將前端的構建結果（dist目錄裡的檔案）複製到後端工程中 5. 構建後端

此過程可以藉助 jenkins 配置，或者，讓運維同學配合修改部署指令碼。