1. 程式人生 > >Vue 開發|檔案目錄結構部署

Vue 開發|檔案目錄結構部署

基於 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檔案地址為:, 那麼後端同學的機器中需要在 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 頁面預設會載入 這個檔案。 此外,如果不想用 debughost 這個域名的 js 檔案,訪問 jsp 時候還可以通過 url 帶入 debughost 引數來指定前端 ip 。

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

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

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