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

Mondo
  • 945

发现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是访问不到的,有哪位指导下为啥?

回复
阅读 7.5k
6 个回答
✓ 已被采纳

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();
    }
  });
},

},
};

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

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

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

设置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' }
      ]
    }
  }
}

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏