uni-app H5运行问题

在开发 uni-app 项目时，如果你在 H5 平台遇到运行问题，可以参考以下常见的排查步骤和解决方案：

1. H5 运行环境问题

• 问题描述：H5 页面在浏览器中无法正常显示或功能异常。
• 解决方案：
  • 确保项目依赖已安装：运行 npm install 或 yarn install。
  • 检查浏览器兼容性：uni-app 支持主流现代浏览器（Chrome、Firefox、Edge 等），如果使用旧版浏览器可能会出现问题。
  • 清理浏览器缓存，或尝试使用无痕模式打开页面。

2. 路由模式问题

• 问题描述：H5 页面刷新后出现 404，或路由跳转异常。
• 解决方案：
  • 检查 manifest.json 文件中的 h5 配置，确保 router 的 mode 设置为 history 或 hash：

    "h5": {
      "router": {
        "mode": "history" // 或 "hash"
      }
    }
    

  • 如果使用 history 模式，确保服务器配置支持（如 Nginx 或 Apache 的重定向规则）。

3. 跨域问题

• 问题描述：H5 请求接口时出现跨域错误。
• 解决方案：
  • 在开发环境下，可以通过 vue.config.js 配置代理：

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://your-api-server.com',
            changeOrigin: true,
            pathRewrite: { '^/api': '' }
          }
        }
      }
    };
    

  • 在生产环境下，确保后端服务器配置了正确的 CORS 头。

4. 静态资源路径问题

• 问题描述：H5 页面加载时，图片、字体等静态资源无法正常加载。
• 解决方案：
  • 确保静态资源的路径正确，使用相对路径或绝对路径。
  • 如果部署到子目录，可以在 manifest.json 中配置 publicPath：

    "h5": {
      "publicPath": "/your-sub-directory/"
    }
    

5. 样式兼容性问题

• 问题描述：H5 页面样式在部分浏览器中显示异常。
• 解决方案：
  • 使用 postcss 自动添加浏览器前缀，确保样式兼容性。
  • 在 package.json 或 postcss.config.js 中配置：

    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ]
    

6. H5 特定 API 问题

• 问题描述：某些 uni-app API 在 H5 平台不支持或行为不一致。
• 解决方案：
  • 查阅 uni-app 官方文档，确认 API 的兼容性。
  • 使用条件编译处理平台差异：

    // #ifdef H5
    console.log('This is H5 platform');
    // #endif
    

7. 打包部署问题

• 问题描述：H5 打包后部署到服务器，页面无法正常访问。
• 解决方案：
  • 确保打包路径正确，运行 npm run build:h5 生成 dist 文件夹。
  • 将 dist 文件夹中的内容上传到服务器，并确保服务器配置正确。
  • 如果使用 Nginx，可以参考以下配置：

    server {
      listen 80;
      server_name your-domain.com;
      location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
      }
    }
    

8. 调试工具

• 使用 Chrome DevTools 进行调试，查看控制台日志和网络请求。
• 在 main.js 中开启调试模式：

  Vue.config.debug = true;