uni-app H5模型下路由设置history模式后，第一次进入页面显示正常，当刷新当前页面，会显示页面的代码

uni-app H5模型下路由设置history模式后，第一次进入页面显示正常，当刷新当前页面，会显示页面的代码

测试过的手机：

PC浏览器

操作步骤：

  1. 设置项目WEB设置路由模式为history
  2. 第一次加入一个页面正常。
  3. 同一个页面，刷新显示当前页面的源代码。

预期结果：

解决多次刷新，还是显示页面，不要出现源代码

实际结果：

  1. 第一次加入一个页面正常。
  2. 同一个页面，刷新显示当前页面的源代码。

bug描述：

【报Bug】H5模型下路由设置history模式后，第一次进入页面显示正常，当刷新当前页面，会显示页面的代码。

  1. 设置项目WEB设置路由模式为history
  2. 第一次加入一个页面正常。
  3. 同一个页面，刷新显示当前页面的源代码。
信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app H5模型下路由设置history模式后，第一次进入页面显示正常，当刷新当前页面，会显示页面的代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

是不是有浏览器插件影响？隐私模式还有这个问题吗

更多关于uni-app H5模型下路由设置history模式后，第一次进入页面显示正常，当刷新当前页面，会显示页面的代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问你解决了，我也遇到了这个问题

还没有解决，我现在只是路径用 ./ 但是图片路径出问题了

回复 5***@qq.com: 你好,你的图片路径是怎么解决的

我也遇到这个问题了 请问解决了吗

在使用 uni-app 开发 H5 应用时，如果设置了 history 模式的路由，刷新页面时出现页面代码的情况，通常是由于服务器配置问题导致的。history 模式的路由依赖于服务器端的配置，以确保在刷新页面或直接访问某个路径时，服务器能够正确地返回 index.html 文件，而不是返回 404 错误。

解决方法

  1. 配置服务器路由重定向

    你需要确保服务器在接收到任何路径请求时，都返回 index.html 文件。以下是一些常见服务器的配置示例：

    • Nginx:

      server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/your/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

    • Apache:

      <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

    • Node.js (Express):

      const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

  2. 检查 uni-app 配置

    确保在 manifest.json 文件中正确配置了 router 的 mode 为 history：

    {
    "h5": {
        "router": {
            "mode": "history"
        }
    }
}
回到顶部