Question

概述：

我有一个使用vue.js，Symfony3和RequireJS构建的网站。我有main.js，其中包含来自Symfony供应商文件夹和资源/公共文件夹的资产和脚本。我还有app.js这是vue的主页面，它呈现了所有组件。

目标：

我的目标是制作网站网络组件，并将其包含在我的其他网站中，而不使用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'
            }

        }
    });
}

main.js

(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);

使用requirejs从外部站点使用Web组件

0 个答案: