更新记录

1.0.0（2026-04-16） 下载此版本

发布lu-request-pro

平台兼容性

uni-app(3.7.6)

uni-app x(3.7.6)

其他

lu-request-pro

UniApp 动态请求地址插件（Vue2 适配），支持默认地址配置、本地持久化、请求/响应拦截器、token自动携带，配套可视化配置页面，开箱即用，兼容多端（微信小程序、App、H5等）。

插件介绍

本插件解决 UniApp 项目中请求地址无法动态配置、需手动修改代码的痛点，同时封装了常用的请求拦截、响应处理、token自动携带功能，简化请求流程，提升开发效率。

核心功能：

• ✅ 动态设置请求BaseUrl，支持本地持久化（重启App不丢失）

• ✅ 预设默认请求地址，支持一键恢复默认

• ✅ 内置请求/响应拦截器，自动携带token、统一错误处理

• ✅ 全局挂载，所有页面可直接调用，无需重复引入

• ✅ 配套可视化配置页面，可直接复制使用，无需额外开发

• ✅ 兼容UniApp多端，无平台适配成本

安装说明

方式1：UniApp插件市场安装（推荐）

1. 打开 HBuilderX，进入你的 Vue2 项目

2. 点击顶部菜单栏「插件市场」→「导入插件」

3. 搜索「lu-request-pro」，点击「导入」，等待导入完成即可

方式2：手动安装

1. 下载插件压缩包，解压后得到 lu-request-pro 文件夹

2. 将该文件夹复制到你的 UniApp 项目的 uni_modules 目录下（若没有 uni_modules 目录，手动创建即可）

快速上手

步骤1：全局挂载（main.js）

在项目根目录的 main.js中引入并全局挂载插件方法，后续所有页面可直接通过 this.$xxx 调用：

// main.js
import Vue from 'vue'
import App from './App'

// 引入插件核心方法
import { request, setBaseUrl, getBaseUrl, resetBaseUrl } from '@/uni_modules/lu-request-pro'

// 全局挂载到Vue原型上
Vue.prototype.$request = request
Vue.prototype.$setBaseUrl = setBaseUrl
Vue.prototype.$getBaseUrl = getBaseUrl
Vue.prototype.$resetBaseUrl = resetBaseUrl

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

步骤2：添加配置页面（可选，推荐）

插件配套可视化配置页面，可直接复制到项目中，用于动态修改请求地址，无需手动开发：

1. 在项目 pages 目录下新建 setting 文件夹，创建 setting.vue 文件

2. 复制下方代码到 setting.vue中（完整可运行，无需修改）

<template>
  <view class="container">
    <view class="title">接口地址设置</view>

    <view class="item">
      <text>当前地址：</text>
      <text class="url">{{ currentUrl }}</text>
    </view>

    <view class="item">
      <input v-model="inputUrl" class="input" placeholder="请输入新的接口地址" />
    </view>

    <button type="primary" @click="saveUrl" class="btn">保存地址</button>
    <button @click="resetDefault" class="btn default">恢复默认地址</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputUrl: '',
      currentUrl: ''
    };
  },
  onShow() {
    this.getCurrentUrl();
  },
  methods: {
    // 获取当前配置的请求地址
    getCurrentUrl() {
      this.currentUrl = this.$getBaseUrl();
      this.inputUrl = this.currentUrl;
    },
    // 保存新的请求地址（自动持久化）
    saveUrl() {
      if (!this.inputUrl) {
        uni.showToast({ title: '地址不能为空', icon: 'none' });
        return;
      }
      this.$setBaseUrl(this.inputUrl);
      uni.showToast({ title: '保存成功' });
      this.getCurrentUrl();
    },
    // 恢复为插件预设的默认地址
    resetDefault() {
      this.$resetBaseUrl();
      uni.showToast({ title: '已恢复默认地址' });
      this.getCurrentUrl();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}
.item {
  margin-bottom: 25rpx;
  line-height: 44rpx;
}
.url {
  color: #007aff;
  word-break: break-all;
  font-size: 28rpx;
}
.input {
  border: 1rpx solid #eee;
  padding: 15rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}
.btn {
  margin-top: 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
.default {
  background-color: #f5f5f5;
  color: #333;
}
</style>

3. 在 pages.json 中配置页面路由（方便跳转）：

{
  "pages": [
    // 其他页面路由...
    {
      "path": "pages/setting/setting",
      "style": {
        "navigationBarTitleText": "接口地址设置"
      }
    }
  ]
}

步骤3：发送请求（核心使用）

配置完成后，在任意页面直接调用 this.$request 发送请求，自动拼接当前配置的 BaseUrl，无需手动拼接：

// 示例1：GET请求
this.$request({
  url: '/user/info', // 相对路径，自动拼接BaseUrl
  method: 'GET',
  data: {
    id: 123
  }
}).then(res => {
  console.log('请求成功：', res);
}).catch(err => {
  console.log('请求失败：', err);
});

// 示例2：POST请求（带参数）
this.$request({
  url: '/login',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  header: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  // 处理登录成功逻辑
}).catch(err => {
  // 处理登录失败逻辑
});

核心方法说明

自定义配置

修改默认请求地址

打开插件目录 uni_modules/lu-request-pro/index.js，找到 DEFAULT_BASE_URL 常量，修改为你的默认接口地址即可：

// index.js 中修改默认地址
const DEFAULT_BASE_URL = 'https://api.yourdomain.com'; // 替换为你的默认地址

修改拦截器逻辑

插件内置了基础的请求/响应拦截器，可根据项目需求修改：

1. 请求拦截器（requestIntercept）：可修改token携带逻辑、添加请求头、修改请求参数等

2. 响应拦截器（responseIntercept）：可修改状态码判断、错误提示、响应数据格式化等

// 示例：修改请求拦截器，自定义token携带方式
function requestIntercept(config) {
  // 自定义逻辑：从vuex中获取token
  const token = store.state.user.token;
  if (token) {
    config.header.Authorization = `Token ${token}`; // 修改token格式
  }
  // 添加自定义请求头
  config.header['X-App-Version'] = '1.0.0';
  return config;
}

// 示例：修改响应拦截器，自定义错误处理
function responseIntercept(res) {
  if (res.statusCode === 200) {
    // 自定义响应数据格式，只返回data中的data字段
    return res.data.data;
  } else if (res.statusCode === 401) {
    // 未授权，跳转登录页
    uni.navigateTo({ url: '/pages/login/login' });
    return Promise.reject('未登录，请先登录');
  } else {
    uni.showToast({ title: res.data.message || '请求失败', icon: 'none' });
    return Promise.reject(res);
  }
}

常见问题

• Q：设置地址后，重启App失效？ A：不会失效，插件已做本地持久化（uni.setStorageSync），重启App会自动读取上次设置的地址；若失效，检查是否修改了STORAGE_KEY常量。

• Q：请求失败，提示“BaseUrl未设置”？ A：未调用$setBaseUrl设置地址，且默认地址未配置；可先调用$setBaseUrl设置地址，或修改DEFAULT_BASE_URL配置默认地址。

• Q：不显示配置页面？ A：检查pages.json中是否配置了setting页面的路由，确保路径正确。

• Q：兼容Vue3吗？ A：本插件默认适配Vue2（UniApp生态最稳定，兼容性最好），Vue3项目需修改全局挂载方式（替换Vue.prototype为app.config.globalProperties）。

注意事项

1. 本插件适配 UniApp + Vue2，Vue3项目需自行调整全局挂载逻辑。

2. 设置的BaseUrl需以http/https开头，否则会导致请求失败。

3. 若项目中使用了uni.request的其他配置（如超时时间），可在$request的options中直接添加（同uni.request）。

4. 发布插件时，需确保uni_modules目录下的插件结构完整，避免遗漏文件。

更新日志

• v1.0.0：初始版本，实现动态设置BaseUrl、持久化、拦截器、配置页面等核心功能。

作者信息

作者：小鲁

插件分类：JS SDK → 通用 SDK

适用场景：UniApp 多端项目、需要动态配置请求地址的项目