作者：阿安

鏈接：https://www.zhihu.com/question/38213423/answer/128155176

來源：知乎

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

基于 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. 入口頁面在前端機器：

通過在本地 dev-server 中使用

[https://

github.com/chimurai/htt

p-proxy-middleware](https://link.zhihu.com/?target=https%3A//github.com/chimurai/http-proxy-middleware)

中間件把接口請求代理到后端機器，vue-cli 生成的 dev-server 中已經自帶了這個功能：

// 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](https://link.zhihu.com/?target=http%3A//172.16.36.90%3A8081/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](https://link.zhihu.com/?target=http%3A//debughost%3A8081/main.js) 這個文件。 此外，如果不想用 debughost 這個域名的 js 文件，訪問 jsp 時候還可以通過 url 帶入 debughost 參數來指定前端 ip 。

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

1. 拉取前端項目代碼 2. 構建前端（構建結果放在dist目錄） 3. 拉取后端代碼 4. 將前端的構建結果（dist目錄里的文件）復制到后端工程中 5. 構建后端

此過程可以借助 jenkins 配置，或者，讓運維同學配合修改部署腳本。

最終的項目模板會是這樣：annnhan/vue-spa-template