webpack 5捆绑的Vue 3刷新页面找不到路由

Question

我在使用 webpack 5 捆绑的 Vue 3 时遇到了一个问题。在我的项目中，没有使用像 Vue-cli 这样的构建工具。

我定义了vue-router，它只在导航时起作用，但是当刷新页面时，屏幕页面出现以下错误：

Cannot GET /home

这是我的 webpack 配置：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VuetifyPlugin } = require("webpack-plugin-vuetify");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const htmlWebpack = require("html-webpack-plugin");
// const CacheLoader = require("cache-loader");
// const { SwcMinifyWebpackPlugin } = require("swc-minify-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const { VueLoaderPlugin } = require("vue-loader");

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

// Config
const config = {

  mode: "production",
  cache: true,
  performance: {
    maxEntrypointSize: 4000000,
    maxAssetSize: 2000000,
  },
  // Plugins
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),

    new htmlWebpack({
      title: "Home page",
      template: "/src/index.html",
      filename: "index.html",
    }),

    new VueLoaderPlugin(),
    new VuetifyPlugin(),
    new CssMinimizerPlugin(),
    // new CacheLoader(),
    new BundleAnalyzerPlugin(),
  ],

  entry: {
    index: "./src/main.js",
  },

  // Ouput
  output: {
    filename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "build"),
  },


  // module
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "esbuild-loader",
        options: {
          loader: "tsx",
          target: "es2015",
        },

    
      },

      {
        test: /\.vue$/,
        loader: "vue-loader",
      },

      // Store css files in specific  separare file
      {
        test: /\.(scss|css)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },

      // Load and optimize images with different formats
      {
        test: /\.(jp?g|png|gif)$/,
        type: "asset/resource",

        generator: {
          publicPath: "assets/images/",
          outputPath: "assets/images/",
          filename: "[name][ext]",
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          publicPath: "assets/fonts/",
          outputPath: "assets/fonts/",
          filename: "[name][ext]",
        },
      },
    ],
  },

  // https://webpack.js.org/configuration/optimization/
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "async",
        },
      },
    },
  },
};

module.exports = {
  ...config,

  cache: {
    type: "filesystem",
    cacheLocation: path.resolve(__dirname, ".test_cache"),
    compression: "gzip",
  },
};

我的路线是：

import { createWebHistory, createRouter } from "vue-router";
import Home from "../pages/Home.vue";
import About from "../pages/About.vue";
const routes = [
  { path: "/", component: Home },
  { path: "/home", component: Home },
  { path: "/about", component: About },
];

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

export default router;`

此外，我的 main.js 包含：

import { createApp } from "vue";
import "./styles/button.scss";
import "./styles/main.scss";
import vuetify from "./plugins/vuetify/index.js";
import router from "./router/index";
import App from "./App.vue";

const app = createApp(App);

app.use(vuetify);
app.use(router);
app.mount("#app");

如何解决这个问题？