关于前端:vuecli多页面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"},
            ],
        },
    },
}