vue-cli多页面history模式-问题解答

简单配置

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 '<'

遇到这种问题，是因为在vue.config.js中的publicPath没有设为 '/'

无法定位我自己所配置的‘sysadmin’的页面

在vue.config.js中configureWebpack添加配置

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