背景

由於歷史原因，一個站點需要做成完全的SPA應用是非常困難的, 但我們可以在一些比較獨立的業務中使用SPA, 每個SPA應用相互獨立. 這樣在用webpack打包的時候其實是會加快效率，同時不同的業務的依賴也可以不一樣, 方便以後維護.

思考

當我在使用 vue + webpack 開發單頁面的時候，主機host是 localhost, 端口是 8080(可自行更改). 但我的本地開發站點 在其它的linux 主機上, 而且使用 nginx 進行了代理.
站點裏面已經存在了其它業務， 如果我在自己機器上開發，那麼如何去調用訪問這個站點的接口呢?

代理轉發

如果你使用的是 vue-cli 進行初始化項目， 比如：

vue init webpack new-project

那麼在config/index.js 下可以修改 dev.proxyTable

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    onProxyReq (proxyReq, req, res) {
    }
  }
}

實際上這是因為腳手架使用了中間件 http-proxy-middleware

如果我們要去掉 api.example.com的api路徑？

設置 pathRewrite

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    pathRewrite: '^/api' : '',
    onProxyReq (proxyReq, req, res) {
    }
  }
}

代理的好處:

1. 解決開發時跨域問題

代理的問題：

1. 代碼需要設置環境變量，prod環境下不存在 http-proxy-middleware 中間件

攜帶Cookie

如果我想擁有 www.example.com 或 *.example.com 下的 cookie 進行模擬請求.

可以利用 nginx + host 進行轉發配置
本地配置 host

127.0.0.1 www.example.com

配置 linux 機器的 nginx.conf

http: {
    server： {
        listen 80;  
        server_name www.example.com;
        location / {
        }
        location /project_name { # 指定發佈時的路徑, 如 /profile
           proxy_pass http://xxx.xxx.xxx.xxx:8080; # 你的主機IP
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

只要你訪問 www.example.com/profile 就能訪問到 你正在開發的SPA 應用了

雖然這樣能夠解決問題，不過這樣就會帶來 nginx 的配置, 然而這在上線的時候又不是必備的.

雖然我用過 fiddler4, 但我發現了一個更簡單的配置工具，叫做 whistle. 具體使用可以在github官網去搜索學習.

whistle 是由nodejs開發的工具，他能做的東西有很多，可以查看報文，注入代碼。自帶了weinre 調試工具, 再配合whistle 的 chrome 插件. 就可以很快的進行配置host, 以及基本的代理了.

安裝 whistle

npm install -g whistle
whistle.cmd

他會啓動一個端口，訪問站點。然後配置 rules

我們就可以通過訪問 www.example.com/profile 進行訪問我們的單頁面應用了, 這樣請求就能攜帶我們www.example.com 下面的cookie了

小結

以上是個人的開發經驗， 如果你有更好的解決方案。歡迎提出來一起討論一下!!

相關項目及地址

• vue

• webpack

• vue-cli

• vuejs-templates/webpack

• whistle