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"},
            ],
        },
    },
}