H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

回答:

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'
}

回答:

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

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

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址