history模式下，路由重定向的组件不显示

Question

问题描述

学习vue路由时发现在history模式下打包后的项目打开时没有显示重定向的页面。（文件的导入路径都是正确的）

相关代码

//main.js
import Vue from 'vue'
import router from "./router/router.js"
import App from './App.vue'

Vue.config.productionTip = false
console.log(router);
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

//app.vue
<template>
  <div id="app">
    <p>app</p>
    <router-view></router-view>
  </div>
</template>

//router.js
import vue from "vue";
import router from "vue-router";
vue.use(router);
import home from "../components/home"
...
const routes=[
  {path:"/",redirect: "/home"},
  {path:"/home",component:home},
  ...
]
const  Router=new router({
  routes,
  mode:"history"
})
export default Router;

//home.vue
<template>
    <div class="home">
      <p>首页</p>
      <p>
        <router-link to="/test">test</router-link>
        <router-link to="/about">about</router-link>
      </p>
    </div>
</template>

期望的页面

实际上的页面

是因为没有进行服务端配置还是其他原因？
求大佬指教

Answer 1

history 模式需要后台配置 nginx ，配置了吗？ 参考链接https://router.vuejs.org/zh/g...

Answer 2

可能是你mian.js和router.js文件有问题,我这可以正常显示

项目结构

index.js代码

// router.js
import vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'
vue.use(Router)

const routes = [
  {path: '/', redirect: '/home'},
  {path: '/home', component: home}

]
const router = new Router({
  routes,
  mode: 'history'
})
export default router

main.js代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')