迁移至Vue-Router v4后页面空白问题求助

我正在把一个Vue项目迁移到Vue 3，按迁移指南完成基础配置后，当前处于vue-router从v3升级到v4的阶段。仅修改了main.js和router/index.js，迁移前项目运行正常，但修改后页面直接空白。

控制台只出现路由兼容层的WATCH_ARRAY弃用警告，这个警告属于预期行为。已经试过多种同类问题的解决方案，但都没效果，不排除其他代码位置存在隐性问题的可能。

项目依赖 #

"dependencies": {
    "babel-polyfill": "^6.26.0",
    "@vue/compat": "^3.2.6",
    "axios": "^1.5.0",
    "currency-formatter": "^1.5.5",
    "fuse.js": "^6.6.2",
    "isomorphic-fetch": "^3.0.0",
    "localforage": "^1.10.0",
    "lodash-es": "^4.17.21",
    "moment": "^2.29.4",
    "qs": "^6.11.2",
    "vue": "^3.2.6",
    "vue-router": "^4.2.4",
    "vuex": "^4.1.0",
    "window-or-global": "^1.0.1"
  },
  "devDependencies": {
    "acorn": "^8.10.0",
    "@babel/core": "^7.22.10",
    "@babel/eslint-parser": "^7.22.10",
    "@babel/runtime": "7.22.10",
    "@babel/runtime-corejs2": "7.22.10",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@openapitools/openapi-generator-cli": "2.7.0",
    "@vue/compiler-sfc": "^3.2.6",
    "autoprefixer": "^7.1.2",
    "babel-loader": "^8.3.0",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "chai": "^4.3.8",
    "chalk": "^5.3.0",
    "copy-webpack-plugin": "^5.1.2",
    "cross-env": "^7.0.3",
    "css-loader": "^3.6.0",
    "eslint": "^8.47.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-n": "16.0.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^9.17.0",
    "eslint-webpack-plugin": "^2.2.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.5.2",
    "inject-loader": "^4.0.1",
    "karma": "^6.4.2",
    "karma-coverage": "^2.2.1",
    "karma-mocha": "^2.0.1",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^2.0.2",
    "karma-sourcemap-loader": "^0.4.0",
    "karma-spec-reporter": "0.0.36",
    "karma-webpack": "^4.0.2",
    "mocha": "^10.2.0",
    "node-notifier": "^10.0.1",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^3.2.1",
    "ora": "^5.4.1",
    "phantomjs-prebuilt": "^2.1.14",
    "portfinder": "^1.0.32",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^3.0.2",
    "sass-loader": "^7.3.1",
    "semver": "^7.5.4",
    "shelljs": "^0.8.5",
    "sinon": "^15.2.0",
    "sinon-chai": "^3.7.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^16.8.3",
    "vue-style-loader": "^4.1.3",
    "webpack": "^4.46.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^4.2.2"
  },

修改后的main.js #

import 'babel-polyfill'

import { createApp } from 'vue'
import { router } from './router'

import root from 'window-or-global'
import AppWrapper from './components/AppWrapper.vue'
import { store } from './store'

import './assets/css/font-awesome.css'

const appWrapper = createApp(AppWrapper)

appWrapper.use(store)
appWrapper.use(router)

root.$router = router
root.$store = store

appWrapper.config.lang = 'de'

appWrapper.mount('#appWrapper')

修改后的router/index.js #

import { createRouter, createWebHistory } from 'vue-router'
import InventoryPage from '../components/pages/InventoryPage'

export const router = createRouter({
  history: createWebHistory(process.env.BASEPATH),
  routes: [
    {
      path: '/',
      name: 'StartPage',
      redirect: {
        name: 'Inventory'
      }
    },
    {
      path: '/inventory',
      name: 'Inventory',
      component: InventoryPage
    },
    {
      path: '/:pathMatch(.*)*',
      redirect: '/'
    }
  ]
})

排查方向与解决方案 #

1. 检查基础路径配置
   createWebHistory的参数是应用的基础路径，如果process.env.BASEPATH未正确配置（比如为空或错误值），会导致路由无法匹配。可以先替换成固定值createWebHistory('/')测试是否恢复正常。

2. 确认路由出口存在
   检查AppWrapper.vue中是否有Vue 3的路由出口标签<router-view />，遗漏这个标签会导致路由组件无法渲染，页面直接空白。

3. 验证兼容模式配置
   因为使用了@vue/compat，要确认webpack或vue配置文件中是否正确开启兼容模式，比如在vue-loader中设置compiler: '@vue/compat'，否则旧的Vue 2语法可能无法被正确解析。

4. 移除全局变量挂载测试
   代码中把$router和$store挂载到全局对象root，可能和Vue内部实例产生冲突。可以暂时注释这两行，测试页面是否能正常渲染。

5. 替换测试组件
   InventoryPage可能存在Vue 2语法兼容问题，先替换成一个极简的测试组件（比如只写<div>测试内容</div>），确认是否是组件本身导致的空白。

6. 开启调试模式
   在main.js中添加appWrapper.config.debug = true，或者用Vue Devtools查看组件树和路由状态，确认路由是否正确跳转、组件是否被实例化。

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