vue-cli项目中抽离管理所有接口地址的一个简单粗暴的方案

2024年4月14日 185次阅读 来源: 条件状语从句

第一步：根据环境使用相应的host地址

一般来说，开发环境和生产环境所用的接口地址不会是同一个，比如大多数开发者都会在开发环境配置mock server而在生产环境使用真实api。更别说严谨的项目可能会有测试环境和预发环境。

方法1. 配置DefinePlugin

一个方法是在webpack.dev.conf.js和webpack.prod.conf.js中，直接把环境变量加在webpack.DefinePlugin里，以：

module.exports ={
     // ...
     plugins: [
        new webpack.DefinePlugin({
            //...
            'API_HOST': '"http://xxxxx.com:8080"'
            //这里注意，必须写成这种引号套引号的形式，或者写成JSON.stringify('string')这样。
        })
      ],
     // ...
}

需要的时候直接用就行：

this.axios.get(API_HOST + '/api/what').then(function (res) {});

webpack文档对DefinePlugin的解释：

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.

方法2. 配置config

修改config/index.js，使各个环境配置里面的env文件名根据环境变量获取：

module.exports = {
  build: {
    env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env')
    //...
    }

分别修改config目录下所有的环境配置文件，以prod.env.js为例：

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://xxxxx.com:8080"'//注意点与上面类似
}

然后在任何地方就可以直接使用process.env.API_HOST来访问。

this.axios.get(process.env.API_HOST + '/api/what').then(function (res) {});

我个人倾向于这种方法，虽然稍微麻烦一点，但是更干净合理，毕竟config.js就是给你做特殊设置的，能在config里配置的绝不进build里配置。

第二步：抽离所有接口地址放入同一个文件里管理

第一步已经满足了大部分开发者的需要，一般如果接口少且来源唯一，第二步没必要。
但如果你的项目使用了很多来源的接口，比如和第三方合作的，使用了开放接口的，使用了之前项目接口的，变数很多，接口命名风格也不统一，这不是一个洁癖前端想要的。

首先，在任何一个地方新建一个接口管理文件api_list.js（我习惯放进/config），写入你需要统一管理的：

const host = process.env.API_HOST//这里使用了第一步第二种方法
module.exports = {
    API_ONE: host + '/oh/my/god', //description
    API_TWO: host + '/ok/very/nice', //description
    API_THREE: host + '/api/what', //description
}

然后在入口文件main.js里先引入这个配置对象，然后直接简单粗暴地挂载到window对象上：

const API = require('../config/api_list')
window.API = API;

很多人谈全局变量色变，我觉得只要命名清晰规范，又有命名空间，不会有任何问题。

使用的时候直接API.API_ONE这样子去用就行：

this.axios.get(API.API_ONE).then(function (res) {});

简单粗暴，但又很实用。网上大多数方案都是写一个配置文件然后在用到的地方引入，这很符合模块化，但很麻烦。这个方案不同之处就是挂载了window对象。

    原文作者：条件状语从句
    原文地址: https://segmentfault.com/a/1190000014596984
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞