Vue3(Vite)中iframe始终加载index.html而非本地HTML问题求助

以下是针对你遇到问题的排查和解决步骤：

• 检查网络请求确认问题根源
  打开浏览器开发者工具的Network面板，查看iframe请求/VisTest.html的响应内容。如果返回的是index.html，说明请求被服务器（或Vue Router）拦截并路由到了应用入口文件，而非静态HTML文件。

• 调整Vue Router的通配符路由规则
  如果你配置了通配符路由（如path: '/:pathMatch(.*)'）用于404页面，它可能会匹配到静态HTML文件的路径。可以在路由的beforeEnter钩子中排除.html结尾的请求：

  const router = createRouter({
    history: createWebHistory(),
    routes: [
      // 你的其他路由
      {
        path: '/:pathMatch(.*)*',
        component: NotFoundComponent,
        beforeEnter: (to) => {
          if (to.path.endsWith('.html')) {
            // 直接跳转至静态文件，不经过Vue路由
            window.location.href = to.path;
            return false;
          }
        }
      }
    ]
  });
  

• 修正开发环境devServer配置
  如果使用Vue CLI，检查vue.config.js中的devServer.historyApiFallback配置。默认情况下它会优先处理静态文件，但如果自定义了rewrites规则，需添加针对VisTest.html的规则：

  module.exports = {
    devServer: {
      historyApiFallback: {
        rewrites: [
          { from: /^\/VisTest\.html$/, to: '/VisTest.html' },
          // 其他已有的rewrite规则
        ]
      }
    }
  };
  

• 生产环境服务器配置优化
  若部署到生产环境（如Nginx），确保服务器优先返回静态文件，再处理Vue路由。在Nginx配置的location /块中添加：

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

  这条规则会让Nginx先查找请求对应的静态文件（如VisTest.html），找不到时再返回index.html。

• 简化iframe路径写法
  无需拼接window.location.origin，直接使用根路径即可：

  data() {
    return {
      htmlPath: '/VisTest.html'
    };
  }
  

内容的提问来源于stack exchange，提问作者Gummistiefel