Laravel+AngularJS迁移Vite后blade.php路由组件失效求助

问题根源 #

Vite 和 Webpack 的加载逻辑不一样：Webpack 打包完会把资源全局暴露，Vite 默认是 ESM 按需加载，不会把 AngularJS 模块扔到全局，所以 Blade 里的路由找不到对应的组件。

具体修复步骤 #

1. 把 AngularJS 模块挂到全局 #

在你的 Vite 入口文件（比如 resources/js/app.js）里，手动把模块挂载到 window 对象：

import angular from 'angular';
import ngRoute from 'angular-route';

// 定义你的 AngularJS 模块
const yourApp = angular.module('yourApp', [ngRoute]);

// 必须挂到全局，Blade 才能访问到
window.angular = angular;
window.yourApp = yourApp;

2. 修正 Blade 里的路由代码 #

Blade 里写的 AngularJS 路由配置，要直接用全局注册的 yourApp 模块，别用局部变量：

<script>
yourApp.config(function($routeProvider) {
    $routeProvider
        .when('/user/profile', {
            templateUrl: '/resources/views/components/user-profile.blade.php',
            controller: 'UserProfileController'
        });
});
</script>

3. Vite 配置里声明全局依赖 #

在 vite.config.js 中添加 Rollup 配置，告诉 Vite 把 AngularJS 相关依赖打包成全局可用的：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                globals: {
                    angular: 'angular',
                    'angular-route': 'angularRoute'
                }
            }
        }
    }
});

4. 控制器/指令必须全局注册 #

所有 AngularJS 的控制器、指令都要注册到全局的 yourApp 模块上，不能只在局部定义：

// 错误示例：只在局部定义，Blade 访问不到
// const UserProfileController = function($scope) { /* ... */ };

// 正确示例：注册到全局模块
yourApp.controller('UserProfileController', function($scope) {
    // 控制器逻辑写这
});

5. 开发环境刷新配置 #

如果是开发阶段，要让 Vite 监听 Blade 文件的变化，修改 vite.config.js 的 refresh 配置：

laravel({
    input: ['resources/css/app.css', 'resources/js/app.js'],
    refresh: ['resources/views/**/*.blade.php'],
}),

验证方法 #

1. 跑 npm run dev 启动 Vite
2. 访问目标路由，打开浏览器控制台看有没有“模块未找到”的报错
3. 确认 Blade 里的 AngularJS 代码能正常调用 yourApp 模块

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