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

发布于 2025-01-17 04:51:30 字数 1390 浏览 0 评论 0原文

我已经使用 Vue3 创建了我的网站，并且使用 Vue 路由器在我的应用程序中导航。我发布了我的网站并添加了以下 .htaccess 以将所有请求重定向到 index.html。它适用于一些“页面”，但不适用于所有页面。例如，如果您尝试此链接

https://senph-design.de/about

它就可以正常工作，但如果您尝试以下链接

https://senph-design.de/品牌

它将显示 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 Router 的 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;

原文

I have created my Website with Vue3 and I am Using Vue router to navigate in my Application. I published my Website and added the following .htaccess to redirect all requests to index.html. It works for a few "pages" but not for all of them. For example if you try this link

https://senph-design.de/about

it just works fine, but if you try the following link

https://senph-design.de/branding

it will show the 404 not found page, and I don't know what I'm missing in my .htaccess file.

What I noticed is that it isn't working for every page I used a component in it but I don't know how to fix this problem.

this is my .htaccess code

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]

And this ist my index.js for the Vue Router

  {
    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;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2025-01-24 04:51:31

尝试在 .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>

Try to use this config in your .htaccess file and replace with your application 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>

回复收藏 0 原文

~没有更多了~