我刚刚开始使用 Vue.js 构建应用程序，一切正常，但在浏览器中页面完全空白。在终端它说没有错误。在做了一些在线研究之后，我创建了一个 vue.config.js 来尝试修复不起作用的配置。请帮忙。

App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/login">Login</router-link>
    <router-link to="/secret">Secret</router-link>
    <router-link to="/secret">Register</router-link>
  </div>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

我感觉路由器可能有问题。

路由器/index.js

import { createRouter,createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Secret from '../views/Secret.vue'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',name: 'Home',component: Home
  },{
    path: '/login',name: 'login',component: Login
  },{
    path: '/about',name: 'about',component: About
  },{
    path: '/register',name: 'register',component: Register
  },{
    path: '/secret',name: 'secret',component: Secret
  },name: 'About',// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),routes
})

export default router

babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/docs/1.0/'  // This is whatever your path from the root is
      : '/'
  }

看来我不是以前遇到过这个问题的唯一人。但我仍然无法在互联网上找到合适的解决方案。