Не работает динамический роутинг в webpack + vue, в чем может быть причина?

Question

[DefaultElement]

Не работает динамический роутинг в webpack + vue, статический роутинг работает отлично, а динамический не может найти файл скриптов и стилей, пример ошибки:

Refused to apply style from 'localhost:9000/book/assets/css/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Конфиг вебпак:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {VueLoaderPlugin} = require("vue-loader")
module.exports = {
mode: 'development',
target: 'web',
context: path.resolve(__dirname, 'src'),
entry: {
    bundle: path.resolve(__dirname, 'src/app', 'index.js')
},
devServer: {
    static: {
        directory: path.join(__dirname, './src/public/index.html'),
    },
    historyApiFallback: true,
    port: 9000,
    hot: true,
    compress: true,
    open: true,
},
resolve: {
    alias: {
        '@': path.resolve(__dirname, './src'),
    },
    extensions: ["*", ".js", ".vue", ".json"],
},
output: {
    clean: true,
    path: path.resolve(__dirname, 'dist'),
    filename: "assets/js/[name].js",
    assetModuleFilename: "assets/resource/[name][ext]"
},
plugins: [
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin({
        chunks: ['bundle'],
        template: "./public/index.html",
        inject: 'body'
    }),
    new MiniCssExtractPlugin(
        {
            filename: "assets/css/[name].css",
            chunkFilename: "assets/css/[name].css"
        }
    ),
    new CopyPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, 'src/public/favicon.ico'),
                to: path.resolve(__dirname, 'dist')
            },
            {
                from: path.resolve(__dirname, 'src/public/img'),
                to: path.resolve(__dirname, 'dist/assets/img')
            }
        ],
    }),
],
module: {
    rules: [
        {test: /\.vue$/, loader: 'vue-loader'},
        {
            test: /\.(css)$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]
        },
        {
            test: /\.(png|jpg|svg|gif|woff|ttf)$/,
            type: 'asset/resource'
        },
    ]
},
performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}
}

Пример роутинга:

import {createRouter, createWebHistory} from 'vue-router'
const IndexPage = () => import("../pages/IndexPage.vue")
const PageNotFound = () => import("../pages/PageNotFound.vue")
const BookPage = () => import("../pages/BookPage.vue")
const router = createRouter({
history: createWebHistory(),
base: __dirname,
routes: [
    {
        path: '/',
        name: 'home',
        component: IndexPage
    },
    {
        path: '/book/:code',
        name: 'book.detail',
        component: BookPage
    },
    { path: '/:pathMatch(.*)*', component: PageNotFound },
]
})
export default router

Comments

[Aetae]

base, как и publicPath webpack должен быть не како-то там __dirname - а то где одно будет лежать на сайте.
Судя по тому что пытается качать стили из /book, а не из / - проблема где-то тут, либо нет <base> либо оно кривое.
Возможно в HTMLWebpackPlugin надо задать publicPath руками(хотя вроде должен сам тянуть).