Vue 前端项目和后端API的配置

前期的做法

因为全靠自己摸索，前期用的方法就显得很傻：前后端在端口都分离。
1.前端Vue项目，开个 5188端口，后端api项目（用c#）,配个5199端口。
2.考虑到开发环境和正式环境配置不同，
2.1 正式环境时如第1条说的配置；
2.1 开发环境时，为了调试，vue会开启8080端口，而后端的c#做的服务会开启一个五位数的端口（比如52917）

所以，用webpack时，在config下的dev.env.js 和prod.env.js，分别建API_ROOT，然后分别配置开发环境和正式环境的API调用。如图： dev.png prod.png
PS:有时，还需要把开发环境的localhost改成ip，便于跟踪调试。因为VS是启动IIS Express,又废了一番功夫，参考这篇：https://blog.csdn.net/qiujuer/article/details/40350385
改好后，把开发环境的API_ROOT改成ip即可。

改进后的方法

因为都是内网的应用，服务器部署在内网，所以也无所谓同一个应用需要开两个端口，部署到两个目录。但是随着时间推进，问题出现：
A.每次程序的更新，都要涉及两个目录的更新
B.服务器ip改变（虽然不会经常），前端程序需要重新编译（因为API_ROOT是写在配置代码里面的）
于是搜索了下合并的方法，第一次改进记录如下：
1.正式环境：前端的项目和后端项目在同一域下，占用同一端口，后端项目配置ServiceApi目录（iis中建成虚拟目录）。如下图

folder.png
注意点：
A. ServiceApi项目中，c#的dll要放在bin目录中，要不会出现xxx程序集找不到的问题。（因为.net会在bin中搜索程序集）
B.后端框架用的是秋大开源的Taurus.MVC做webApi配置，在配置中需要把RouteMode的值改成2（为啥？因为默认值是1的时候，认为传入的webapi格式是：http://192.168.1.12:999/API/FetchData , API是Controller的名字，FetchData是Action。但是现在执行目录被移到虚拟目录了，正确访问的地址是：http://192.168.1.12:999/ServiceApi/API/FetchData , 多了个虚拟目录的路径，就必须把RouteMode改成2了（不得不说，秋大想的很周到......）
C.在前端项目中，在config的index.js中，dev段，下的proxyTable进行修改（如图）（原来默认是空的）。改的目的，就是为了在开发环境时，原本属于同域下虚拟目录的请求路径转化成vs的iisexpress暴露出来的调试路径。
proxyTable.png
特别注意：pathRewrite的作用，是因为在正式环境下，api的访问路径是 http://192.168.1.12:999/ServiceApi/API/FetchData ，但是到了开发环境，vs所启动的iisExpress的同个api访问路径是http://192.168.1.12:999/API/FetchData ，所以需要把虚拟目录在地址上给替代掉。 （不得不说，webpack想的很周到......）