Vue3 Router - createWebHistory v createWebHashHistory 问题与 <router-view>

Question

我试图弄清楚为什么 createWebHistory 不会显示

<router-view>

，但 createWebHashHistory 会。

在本地主机上使用 createWebHistory 可以正常工作，但在服务器（dreamhost）上，它只会显示 App.vue 中的内容，而不会显示

<router-view>

中的内容。 createWebHash历史记录在任何地方都运行良好。

我错过了什么？我通常使用 createWebHashHistory，但想看看我是否无法在某些网站上使用哈希。

这是路由器index.js

import { createRouter, createWebHistory } from "vue-router";

import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

这是vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  // base: "https://websiteurl.com/folder/",
  base: "",
  server: {
    // origin: "http://localhost:5173",
    proxy: {
      "/php": {
        target: "https://websiteurl.com/folder/",
        changeOrigin: true,
        secure: false,
        ws: false,
      },
      "/src/assets": {
        target: "https://websiteurl.com/folder/",
        changeOrigin: true,
        secure: false,
        ws: false,
      },
    },
  },
});

这是App.vue

<template>
  <div class=" flex flex-col min-h-screen">
    <div class="bg-base-blue w-full flex flex-col items-center justify-center py-2">
      <img src="./assets/img.png" class="w-40" />
    </div>
    <router-view v-slot="{ Component }" class="flex-grow">
      <component :is="Component" />
    </router-view>
    <Footer />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

import Footer from "./components/Footer.vue";

const router = useRouter();
const route = useRoute();

</script>

Answer 1

我遇到了同样的问题，这是因为我的网络服务器配置根据文档：https://router.vuejs.org/guide/essentials/history-mode.html

你应该为 Apache 准备这个

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

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

对于 Nginx 来说是这样的：

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