直接从 vue.js 中的 URL 加载页面时找不到 URL [重复]

Posted 2023-02-22

【中文标题】直接从 vue.js 中的 URL 加载页面时找不到 URL [重复]

【英文标题】：Url not found when loading pages straight from the url in vue.js [duplicate]

【发布时间】：2021-02-09 21:32:27

【问题描述】：

我在 vue.js 中使用 vue-router。当我将它作为本地服务器运行时它工作正常，但是一旦我将它上传到我的网络服务器并直接进入一个页面，它就会导致“未找到”错误，

这作为本地服务器运行良好： http://192.168.2.118:8080/page2

但是这个： https://www.mypage.com/page2

结果

未找到在此服务器上未找到请求的 URL。

我已将模式设置为“历史”以摆脱 url 中的 # 但似乎与 # 无关。

这与我的网络服务器有关吗？

这是我的 router.js 中的代码

export default new Router(
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        
            path: "/",
            name: "page1",
            component: Page1
        ,
        
            path: "/page2",
            name: "page2",
            component: () =>
                import(/* webpackChunkName: "home" */ "./views/Page2.vue")
        
    ]
);

这是该项目的完整回购： https://github.com/reppoper/forumpost

解决方案：

我通过将此 .htaccess 文件放在根文件夹中找到了解决方案。并非一切都按预期工作：

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

【问题讨论】：

你用的是什么主机？网络化？

【参考方案1】：

由于您的应用是单页客户端应用，没有适当的服务器配置，如果用户直接在浏览器中访问http://yoursite.com/page2，将会收到 404 错误。

要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资源，它应该提供与您的应用相同的 index.html 页面。

查看文档以在不同类型的服务器上解决此问题。 Docs

【讨论】：

嗯。我有两个 webhotels，这在一个上有效，但在另一个上无效。我是否需要在服务器上进行任何配置才能使其正常工作？

找到了解决方案。更新了我上面的帖子

不错！该解决方案适用于 Apache 服务器。 router.vuejs.org/guide/essentials/…