Vue2 Router路由异常，启动后显示空白页求排查修复

启动Vue前端项目后页面空白，无法自动跳转至Login页面，怀疑Vue Router工作异常，附上相关代码文件，请求协助排查修复。

router/index.js #

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/page/login'

Vue.use(Router)

let routes = [
    {
        path: '/',
        redirect: '/login',
    },
    //front page
    {
        path: '/login',
        name: 'Login',
        component: Login,
    },
    //register
]

const createRouter = () => new Router({
    mode: 'history',
    routes: routes
})

const router = createRouter()

export default router

App.vue #

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

<script>
export default {
  name: 'App',
}
</script>

main.js #

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import router from './router/'
import store from './store';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

Vue.config.productionTip = false

Vue.use(ElementUI, {size: 'small'});

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

login.vue #

<template>
    <div>
        <h1>helloworld</h1>
    </div>
</template>

<script>
export default {
    name: "Login",
    data(){
        return{
            user:{},
        }
    },
    mounted(){},
    components:{},
    methods:{
        login(){}    
    },
}
</script>

<style scoped>
</style>

package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "echarts": "^5.4.1",
    "element-ui": "^2.15.13",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-router": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

排查修复步骤 #

1. 修复login.vue语法错误
   原login.vue文件末尾的<style>标签多了一个闭合符号>，需改为</style>，语法错误会直接导致组件编译失败，引发页面空白。

2. 验证组件路径正确性
   确认@/page/login对应实际文件路径存在，Vue中@默认指向src目录，需确保src/page/login.vue文件存在，且文件名大小写与代码中一致（Linux/macOS系统区分大小写）。

3. 临时切换路由模式测试
   当前路由使用history模式，本地开发未配置服务器重写规则时可能导致跳转异常。可先改为hash模式验证：

   const createRouter = () => new Router({
       mode: 'hash',
       routes: routes
   })
   

   若切换后正常显示Login页面，说明是history模式的服务器配置问题，部署时再配置重写规则即可。

4. 查看控制台错误日志
   打开浏览器开发者工具（F12）的Console面板，根据报错信息直接定位问题，比如组件导入失败、路由初始化错误等。

5. 排除store初始化问题
   若store目录不存在或index.js有语法错误，会导致Vue实例初始化失败。可临时注释main.js中store相关代码，测试页面是否能正常渲染：

   // import store from './store';
   new Vue({
     router,
     // store,
     render: h => h(App),
   }).$mount('#app')
   

内容的提问来源于stack exchange，提问作者Peter Yap