第一步: 根据环境使用相应的 host 地址
一般来说, 开发环境和生产环境所用的接口地址不会是同一个, 比如大多数开发者都会在开发环境配置 mock server 而在生产环境使用真实 API. 更别说严谨的项目可能会有测试环境和预发环境.
方法 1. 配置 DefinePlugin
一个方法是在 webpack.dev.conf.JS 和 webpack.prod.conf.JS 中, 直接把环境变量加在 webpack.DefinePlugin 里.
需要的时候直接用就行:
this.axios.get ( API_HOST + '/api/what') . then( function (res) { } );
方法 2. 配置 config
修改 config/index.JS, 使各个环境配置里面的 env 文件名根据环境变量获取:
分别修改 config 目录下所有的环境配置文件, 以 prod.env.JS 为例:
然后在任何地方就可以直接使用 process.env.API_HOST 来访问.
我个人倾向于这种方法, 虽然稍微麻烦一点, 但是更干净合理, 毕竟 config.JS 就是给你做特殊设置的, 能在 config 里配置的绝不进 build 里配置.
第二步: 抽离所有接口地址放入同一个文件里管理
第一步已经满足了大部分开发者的需要, 一般如果接口少且来源唯一, 第二步没必要.
但如果你的项目使用了很多来源的接口, 比如和第三方合作的, 使用了开放接口的, 使用了之前项目接口的, 变数很多, 接口命名风格也不统一, 这不是一个洁癖前端想要的.
首先, 在任何一个地方新建一个接口管理文件 api_list.JS(我习惯放进 / config), 写入你需要统一管理的:
然后在入口文件 main.JS 里先引入这个配置对象, 然后直接简单粗暴地挂载到 Windows 对象上:
很多人谈全局变量色变, 我觉得只要命名清晰规范, 又有命名空间, 不会有任何问题.
使用的时候直接 API.API_ONE 这样子去用就行:
简单粗暴, 但又很实用. 网上大多数方案都是写一个配置文件然后在用到的地方引入, 这很符合模块化, 但很麻烦. 这个方案不同之处就是挂载了 Windows 对象.
来源: http://www.jianshu.com/p/79e6948c7443