Vuexy v9.10.0（Vue3+Laravel9）页面仅加载不显示，求排查

我正在使用Vuexy v9.10.0模板开发Vue3 + Laravel9项目，目前遇到页面访问异常：控制台能显示可访问页面链接，但点击任意链接后，页面一直处于加载状态，无法渲染内容，且控制台无报错信息。怀疑问题出在路由配置或Laravel视图处理逻辑上，需要排查原因。

环境配置详情 #

• Vuexy 版本：v9.10.0
• Vue 版本：Vue 3
• Laravel 版本：9.x

Laravel 路由配置（web.php） #

Route::get('{any?}', function() {
    return view('application');
})->where('any', '.*');

Vue Router 配置 #

• 路由定义在 resources/js/plugins/1.router/additional-routes.js 文件中
• 在 resources/js/plugins/index.js 中使用 createRouter 和 createWebHistory 创建路由实例
• 页面组件存放在 resources/js/views 目录，预期通过 App.vue 中的 <RouterView> 渲染

排查方向 #

1. 检查Vue路由匹配规则
   • 确认 additional-routes.js 中的路由路径是否正确，是否存在嵌套路由配置错误（比如子路由未正确关联父路由）
   • 检查路由组件是否正确导入，避免拼写错误或路径错误
2. 验证Laravel视图加载
   • 确认 resources/views/application.blade.php 中是否正确引入了Vue打包后的JS/CSS文件，比如是否包含 <script src="{{ mix('js/app.js') }}"></script> 这类引用
   • 检查 application.blade.php 的结构，确保挂载点（比如 <div id="app"></div>）存在且正确
3. 检查路由历史模式配置
   • 由于使用 createWebHistory，需确保Laravel对应的Web服务器配置了重写规则，避免路由跳转时出现资源加载异常：
     • Apache示例配置：

       <IfModule mod_rewrite.c>
           <IfModule mod_negotiation.c>
               Options -MultiViews -Indexes
           </IfModule>
       
           RewriteEngine On
       
           # Handle Authorization Header
           RewriteCond %{HTTP:Authorization} .
           RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
       
           # Redirect Trailing Slashes If Not A Folder...
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteCond %{REQUEST_URI} (.+)/$
           RewriteRule ^ %1 [L,R=301]
       
           # Handle Front Controller...
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteRule ^ index.php [L]
       </IfModule>
       

     • Nginx示例配置：

       location / {
           try_files $uri $uri/ /index.php?$query_string;
       }
       

4. 检查加载状态逻辑
   • 查看 App.vue 或布局组件中是否有全局加载状态的逻辑，确认是否错误地将加载状态设置为持续true，未在路由跳转完成后关闭
   • 检查路由守卫（beforeEach/afterEach）是否存在逻辑错误，导致路由跳转被卡住无法完成渲染
5. 调试路由跳转过程
   • 在路由配置中添加 router.beforeEach 钩子，打印跳转的 to 和 from 路由信息，确认路由是否正确匹配到对应组件
   • 检查组件的 created/mounted 生命周期钩子是否执行，判断是路由未匹配还是组件渲染失败

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