我刚刚开始使用 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
: '/'
}
看来我不是以前遇到过这个问题的唯一人。但我仍然无法在互联网上找到合适的解决方案。