背景
由于历史原因，一个站点需要做成完全的
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
| 源地址 | 转发地址 |
|---|---|
| localhost:8080/api | api.example.com/api |
| localhost:8080/api/notifications | api.example.com/api/notifications |
如果我们要去掉 api.example.com的api路径？
设置 pathRewrite
proxyTable: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: '^/api' : '',
onProxyReq (proxyReq, req, res) {
}
}
}| 源地址 | 转发地址 |
|---|---|
| localhost:8080/api | api.example.com |
| localhost:8080/api/notifications | api.example.com/notifications |
代理的好处:
解决开发时跨域问题
代理的问题：
代码需要设置环境变量，
prod环境下不存在http-proxy-middleware中间件
携带Cookie
如果我想拥有 www.example.com 或 *.example.com 下的 cookie 进行模拟请求.
| 本地host | 线下域名 |
|---|---|
| localhost:8080 | www.example.com |
可以利用 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了
小结
以上是个人的开发经验， 如果你有更好的解决方案。欢迎提出来一起讨论一下!!
