如何通过Require.js加载Vue.js？Angular项目集成Vue遇报错

这个报错的核心原因很明确：RequireJS是模块化加载机制，你通过require加载的Vue只存在于回调函数的局部作用域里，并没有暴露到全局window对象，所以页面里直接写的<script>代码找不到Vue变量。

下面给你几个可行的解决方案，按模块化规范程度从高到低排序：

方案一：用RequireJS模块化管理Vue控制器（推荐） #

这种方式最符合RequireJS的设计理念，也能避免全局变量污染，和现有AngularJS的代码风格保持一致。

1. 把Vue控制器代码抽成单独的模块文件，比如project-controller.js：

define(['vue'], function(Vue) {
    return new Vue({
        el: '#ProjectController',
        data: {
            projects: null
        },
        methods:{
            getProjects: function(){
                fetch('/projects/personal')
                    .then(response => response.json())
                    .then(result => { 
                        // 用箭头函数保证this指向Vue实例，避免原代码里的this指向错误问题
                        this.projects = result; 
                    });
            }
        },
        mounted: function () {
            this.getProjects();
        }
    });
});

2. 在dashboard.js的依赖列表里添加这个模块：

require([ 
    'angular', 
    'vue', 
    'i18next', 
    'translations', 
    'raven-js', 
    'raven-angular',
    'project-controller' // 新增Vue控制器模块
], function (angular, Vue, i18next, Translations, Raven, ProjectController) { 
    'use strict';
    // 你的AngularJS代码...
});

3. 删掉index.html.twig里那段直接写的<script>代码，因为控制器已经通过RequireJS加载了。

方案二：把Vue暴露到全局作用域 #

如果不想重构代码，最简单的办法是在RequireJS的回调里把Vue挂载到window上，让页面里的代码能访问到：

修改dashboard.js的回调函数：

require([ 'angular', 'vue', 'i18next', 'translations', 'raven-js', 'raven-angular', ], function (angular, Vue, i18next, Translations, Raven) { 
    'use strict';
    // 把Vue挂载到全局window对象
    window.Vue = Vue;
    
    // 你的AngularJS代码...
});

这样页面里原有的<script>代码就能正常找到Vue变量了，同时注意修正原代码里的this指向问题（用箭头函数或bind(this)）。

方案三：在页面脚本里用RequireJS加载Vue #

直接修改页面里的<script>代码，通过require获取Vue模块后再执行逻辑：

<script>
// 用RequireJS异步加载Vue模块
require(['vue'], function(Vue) {
    var ProjectController = new Vue({
        el: '#ProjectController',
        data: {
            projects: null
        },
        methods:{
            getProjects: function(){
                fetch('/projects/personal')
                    .then(response => response.json())
                    .then(result => { 
                        this.projects = result; 
                    });
            }
        },
        mounted: function () {
            this.getProjects();
        }
    });
});
</script>

这种方式不用修改现有模块配置，也能解决变量未定义的问题，但会把部分逻辑留在页面里，不如方案一整洁。

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