Symfony 通过requirejs使用外部站点的web组件

概述：

我有一个用vue.js、Symfony3和RequireJS构建的网站。我有

main.js

，其中包括Symfony供应商文件夹和资源/公共文件夹中的资产和脚本。我还有

app.js

，它是vue的主页，呈现所有组件

目标是：

我的目标是使站点web组件基于web组件，并将其包含到我的其他站点中，而不使用iframe

问题是：

我一直在谷歌搜索，并没有找到确切的配方如何做到这一点。我试图使用url要求文件，但由于并非所有Symfony资产都可以从url获得，因此我最终出现了许多错误

问题

如何使我的vue.js或任何其他js框架应用程序可从其他站点重用。换句话说，我希望将我的vue.js应用程序包含到外部网站

有没有人做过这件事并且有经验？如何做到这一点

app.js

    define([
    'vue', 
    'text!/bundles/app/js/app.html', 
    'vue-material' ,
    'header', 
    'footer', 
    'frontpage', 
    'signup', 
    'vue-router',
    'routes'
], app);

function app(Vue, template, VueMaterial,  Header, Footer, Frontpage, Signup, VueRouter, AppRoutes) {
    Vue.use(VueMaterial);
    Vue.use(VueRouter);
    Vue.config.productionTip = false;

    let router = new VueRouter({
        mode: 'history',
        routes: AppRoutes
    });

    Vue.material.registerTheme('default', {
      primary: 'grey',
      accent: 'red',
      warn: 'red',
      background: 'white'
    })

    var app = new Vue({
        el: '#app',
        router: router,
        template: template,
        components: {
            home: Frontpage

        },
        data: function() {
            return {
                currentView: 'home'
            }

        }
    });
}

(function (require) {

    "use strict";

    require.config({
        paths: {
            'vue': '/assets/vendor/vue/dist/vue',
            'text': '/assets/vendor/text/text',
            'http': '/assets/vendor/axios/dist/axios',
            'vue-material': '/assets/vendor/vue-material/dist/vue-material',
            'app':  '/bundles/app/js/app',
            'header': '/bundles/app/js/components/header/header',
            'signup': '/bundles/app/js/components/signup/signup',
            'footer': '/bundles/app/js/components/footer/footer',
            'frontpage': '/bundles/app/js/components/frontpage/frontpage',
            'api': '/bundles/app/js/services/api',
            'routes': '/bundles/app/js/routes',
            'vee-validate': '/assets/vendor/vee-validate/dist/vee-validate.min',
            'vue-router': '/assets/vendor/vue-router/dist/vue-router.min',
            'vue-lang': '/assets/vendor/vue-lang/index',
        }
    });

    require(['app']);

})(window.requirejs);

main.js

    define([
    'vue', 
    'text!/bundles/app/js/app.html', 
    'vue-material' ,
    'header', 
    'footer', 
    'frontpage', 
    'signup', 
    'vue-router',
    'routes'
], app);

function app(Vue, template, VueMaterial,  Header, Footer, Frontpage, Signup, VueRouter, AppRoutes) {
    Vue.use(VueMaterial);
    Vue.use(VueRouter);
    Vue.config.productionTip = false;

    let router = new VueRouter({
        mode: 'history',
        routes: AppRoutes
    });

    Vue.material.registerTheme('default', {
      primary: 'grey',
      accent: 'red',
      warn: 'red',
      background: 'white'
    })

    var app = new Vue({
        el: '#app',
        router: router,
        template: template,
        components: {
            home: Frontpage

        },
        data: function() {
            return {
                currentView: 'home'
            }

        }
    });
}

(function (require) {

    "use strict";

    require.config({
        paths: {
            'vue': '/assets/vendor/vue/dist/vue',
            'text': '/assets/vendor/text/text',
            'http': '/assets/vendor/axios/dist/axios',
            'vue-material': '/assets/vendor/vue-material/dist/vue-material',
            'app':  '/bundles/app/js/app',
            'header': '/bundles/app/js/components/header/header',
            'signup': '/bundles/app/js/components/signup/signup',
            'footer': '/bundles/app/js/components/footer/footer',
            'frontpage': '/bundles/app/js/components/frontpage/frontpage',
            'api': '/bundles/app/js/services/api',
            'routes': '/bundles/app/js/routes',
            'vee-validate': '/assets/vendor/vee-validate/dist/vee-validate.min',
            'vue-router': '/assets/vendor/vue-router/dist/vue-router.min',
            'vue-lang': '/assets/vendor/vue-lang/index',
        }
    });

    require(['app']);

})(window.requirejs);

---

如果您将应用程序与browserify或webpack等捆绑在一起，则应用程序应可作为

标记中的web资源访问，如果您需要在Ajax请求中访问应用程序，则需要设置CORS和可接受域列表。您可以使用requirejs和插件require vuejs执行此操作：