vue-cli3.0多页配置时，本地刷新后，找不到路由，该怎么配置？

Question

发现vue-cli脚手架新出了个3.0里面有多页配置项，对文档来试着配置，可以访问每个页面，但是发现刷新时，对应页面的路由都找不到，代码如下

// vue.config.js
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/ems/'
    : '/ems/',
  pages: {
    admin: {
      entry: 'src/views/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin/index.html',
    },
    school: {
      entry: 'src/views/school/main.js',
      template: 'public/school.html',
      filename: 'school/index.html',
    }
  }  
}

// admin.routes.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/admin/Home.vue'
import Layout from '@/components/layout-admin'

Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: {name: 'admin'},
  },
  {
    path: '/admin',
    name: 'admin',
    component: Layout,
    redirect: {name: 'home'},
    children: [
      {
        path: 'home',
        name: 'home',
        component: Home
      },
      {
        path: 'about',
        name: 'about',
        component: () => import('./../views/admin/About.vue')
      }
    ]
  }  
]

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

当通过访问 /ems/admin路由来访问 /ems/admin/home是可以的，但是直接访问 /ems/admin/home是访问不到的，有哪位指导下为啥？

Answer 1

const baseUrl = '/ems/';

module.exports = {
baseUrl: baseUrl,
pages: {

admin: {
  entry: 'src/main.js',
  template: 'public/index.html',
  filename: 'admin/index.html',
},
school: {
  entry: 'src/main.js',
  template: 'public/index.html',
  filename: 'school/index.html',
},

},
devServer: {

before: function(app) {
  const base = baseUrl.replace(/\/+$/, ''); // 移除尾部斜杠
  app.get(`${base}/:page/*`, function(req, res, next) {
    if (['admin', 'school'].includes(req.params.page)) {
      // 把 /<base>/<page>/* 重定向到 /<base>/<page>/
      req.url = `${base}/${req.params.page}/`;
      next('route');
    } else {
      next();
    }
  });
},

},
};

Answer 2

服务端没配置好。你自己也说了当通过访问 /ems/admin路由来访问 /ems/admin/home是可以的，但是直接访问 /ems/admin/home是访问不到的

原因是你直接访问的时候，向后端发起了一个get请求。后端没有进行相应的路由的配置。你要配置一下，所有的路由都返回你相应的html文件即可。

https://router.vuejs.org/zh/g...

Answer 3

设置historyApiFallback

module.exports = {
  pages: {
    admin: {
      entry: 'src/views/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin/index.html',
    },
    school: {
      entry: 'src/views/school/main.js',
      template: 'public/school.html',
      filename: 'school/index.html',
    }
  },
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /\/admin/, to: '/admin.html' },
        { from: /\/school/, to: '/school.html' }
      ]
    }
  }
}

Answer 4

多页面与vue-router冲突了，建议只使用一个进行开发
（你可以试试再pages里把admin放到school后面看看）

Answer 5

试试把redirect去掉，在children里加上

{
  path: '/',
  redirect: '/admin/home'
}

Answer 6

本地开发调试的时候一个指向配置问题