Vue-cli multi-page history mode-question answer

Simple configuration

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
const mainRoutes = [
    {path: '/foo', component: () => import("../views/templates/index.vue")},
];


const router = new Router({
    mode: "history",
    base: "/sysadmin",
    routes: mainRoutes,
});

export default router;

main.js

import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue";
import App from "./index.vue";
import router from './router/index'

new Vue({
    router,
    render: (h) => h(App),
}).$mount("#app");

history Uncaught SyntaxError: Unexpected token '<'

This problem is encountered because the publicPath in vue.config.js is not set to'/'

Unable to locate the page of'sysadmin' configured by myself

ConfigureWebpack add configuration in vue.config.js

configureWebpack:()=>{
    devServer: {
        historyApiFallback: {
            verbose: true,
            rewrites: [
                {from: /^\/index\/.*$/, to: "/index.html"},
                {from: /^\/sysadmin\/.*$/, to: "/sysadmin.html"},
            ],
        },
    },
}