鍍金池/ 問答/HTML/ vue-cli3.0多頁配置時,本地刷新后,找不到路由,該怎么配置?

vue-cli3.0多頁配置時,本地刷新后,找不到路由,該怎么配置?

發(fā)現(xiàn)vue-cli腳手架新出了個3.0里面有多頁配置項,對文檔來試著配置,可以訪問每個頁面,但是發(fā)現(xiàn)刷新時,對應(yīng)頁面的路由都找不到,代碼如下

// 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
})

當(dāng)通過訪問 /ems/admin路由來訪問 /ems/admin/home是可以的,但是直接訪問 /ems/admin/home是訪問不到的,有哪位指導(dǎo)下為啥?

回答
編輯回答
默念

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

},
};

2018年5月7日 01:31
編輯回答
氕氘氚

多頁面與vue-router沖突了,建議只使用一個進(jìn)行開發(fā)
(你可以試試再pages里把a(bǔ)dmin放到school后面看看)

2017年2月26日 17:09
編輯回答
挽青絲

服務(wù)端沒配置好。你自己也說了當(dāng)通過訪問 /ems/admin路由來訪問 /ems/admin/home是可以的,但是直接訪問 /ems/admin/home是訪問不到的

原因是你直接訪問的時候,向后端發(fā)起了一個get請求。后端沒有進(jìn)行相應(yīng)的路由的配置。你要配置一下,所有的路由都返回你相應(yīng)的html文件即可。

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

2017年4月22日 03:50
編輯回答
詆毀你

本地開發(fā)調(diào)試的時候一個指向配置問題

2018年7月14日 01:04
編輯回答
貓館

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

{
  path: '/',
  redirect: '/admin/home'
}
2018年8月24日 07:02