Vue.js SPA使用.htaccess重定向到index.html并不适用于每个页面

aiqt4smr  于 2022-12-23  发布在  Vue.js
关注(0)|答案(1)|浏览(115)

我已经创建了我的网站与Vue3和我正在使用Vue路由器导航在我的应用程序。我发布了我的网站,并添加了以下.htaccess重定向所有请求到index.html。它的工作对少数“网页”,但不是所有的。例如,如果你尝试这个链接
第一个月
它只是工作正常,但如果你尝试以下链接
https://senph-design.de/branding
它将显示404未找到页面,我不知道我的.htaccess文件中缺少了什么。
我注意到的是,它并不是对我在其中使用组件的每个页面都有效,但我不知道如何解决这个问题。

这是我的.htaccess代码

RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI}  !(.png|.jpg|.gif|.jpeg|.bmp)$
RewriteRule . /index.html [L]

这是Vue路由器的index.js

{
    path: "/",
    name: "Welcome",
    component: Welcome,
  },
  {
    path: "/branding",
    name: "Branding",
    component: Branding,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/ux",
    name: "Ux",
    component: Ux,
  },
  {
    path: "/spielwiese",
    name: "Spielwiese",
    component: Spielwiese,
  },
  {
    path: "/kontakt",
    name: "Kontakt",
    component: Kontakt,
  },
  {
    path: "/impressum",
    name: "Impressum",
    component: Impressum,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior() {
    return { top: 0 };
  },
});

export default router;
cunj1qz1

cunj1qz11#

尝试在.htaccess文件中使用此配置,并替换为应用程序url

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

相关问题