uni-app页面发布测试环境出现连接服务器超时，点击屏幕重试解决方案

问题分析：

有一种情况时必现：

用户一直在访问这个网站，停留在A页面；B页面没有访问过；

服务器更新后，用户准备打开B页面，这时必现；

用户一打开网站缓存了网站的页面路由映射关系，服务器更新后，用户访问的是缓存的映射关系，所以服务器端找不到文件；
解决方案：

1、可以使用不缓存的方式解决

2、通过代码捕捉错误的方式解决

【1】代码解决在App.vue通过onError 捕捉错误

复制代码

  import versionChecker from '@/utils/versionChecker.js';
  // 捕获 app error
  onError (err) {
    // 页面显示时检测版本更新
    versionChecker.checkVersion();
  },

2、在versionChecker.js实现检测逻辑这里有很多种，可以自己写弹框的方式让用户触发刷新也可以自动刷新 versionChecker.js

复制代码

import { getCurrentVersion, shouldShowUpdateTip } from '../version.js';

/**
 * 全局版本检测器
 */
class VersionChecker {
  constructor() {
    this.hasShownUpdateTip = false;
    this.checkInterval = null;
  }

  /**
   * 检测版本更新
   */
  checkVersion() {
    // #ifdef H5
    try {
      // 如果已经显示过更新提示，不再重复检测
      if (this.hasShownUpdateTip) {
        return;
      }
      const currentVersion = getCurrentVersion();
      const storedVersion = uni.getStorageSync('app_version');
      if (shouldShowUpdateTip(storedVersion)) {
        console.log(`版本更新检测: ${storedVersion} -> ${currentVersion}`);
        this.showVersionUpdateTip();
        this.hasShownUpdateTip = true;
      } else if (!storedVersion) {
        // 首次访问，设置版本号
        uni.setStorageSync('app_version', currentVersion);
        console.log('首次访问，已设置版本号:', currentVersion);
      }
    } catch (error) {
      console.error('版本检测失败:', error);
    }
    // #endif
  }

  /**
   * 显示版本更新提示
   */
  showVersionUpdateTip() {
    // uni.showModal({
    //   title: '版本更新提示',
    //   content: '检测到应用已更新，为确保最佳体验，请刷新页面获取最新版本',
    //   confirmText: '立即刷新',
    //   cancelText: '稍后处理',
    //   success: (res) => {
    //     if (res.confirm) {
    //       // #ifdef H5
    //       try {
    //         uni.setStorageSync('app_version', getCurrentVersion());
    //         console.log('用户确认刷新，已更新版本号');
    //         // 强制刷新页面
    //         window.location.reload(true);
    //       } catch (error) {
    //         console.error('刷新失败:', error);
    //       }
    //       // #endif
    //     } else {
    //       console.log('用户选择稍后处理版本更新');
    //       // 用户选择稍后处理，重置标志，允许在下次页面显示时再次检测
    //       this.hasShownUpdateTip = false;
    //     }
    //   }
    // });
    window.location.reload(true);
  }

  /**
   * 重置检测状态（用于测试或特殊情况）
   */
  resetCheckState() {
    this.hasShownUpdateTip = false;
  }
}

// 创建全局实例
const versionChecker = new VersionChecker();

export default versionChecker;

3、version.js 应用版本配置文件

复制代码

/**
 * 应用版本配置文件
 * 每次发版时请更新此文件中的版本号
 */

// 当前应用版本号
export const APP_VERSION = '1.1.2';

// 获取当前版本号
export function getCurrentVersion() {
  return APP_VERSION;
}

// 检查是否需要显示更新提示
export function shouldShowUpdateTip(storedVersion) {
  return storedVersion && storedVersion !== APP_VERSION;
}

// 版本更新日志（可选）
export const VERSION_CHANGELOG = {
  '1.0.0': [
    '初始版本发布',
    '基础功能实现'
  ]
};

每次发布的时候修改版本号即可，当出现连接服务器超时，点击屏幕重试时候在全局应用函数onError中触发，然后在onError中触发我们的刷新逻辑