如何使用vue-loader处理远程加载的vue组件文件的字符串？

Question

我现在通过axios 从api接口拉取了一个 vue文件的内容过来，然后向渲染成一个组件对象传递给resolve

如下代码 resolve({}) 里面只是简单写了一个template

那么如何处理一个response.data的内容为组件对象呢？要借助vue-loader吗

var routes_config = [{
    path: '/sider',
    component_url: 'http://localhost/?path=manage.layouts.sider'
}, {
    path: '/user',
    component_url: 'http://localhost/?path=manage.layouts.default'
}]
// 将全局路由进行注册
var routes = {
    routes: (function() {
        var list = new Array()
        for (let i in routes_config) {
            list.push({
                path: routes_config[i].path,
                // 异步组件
                component: function(resolve, reject) {
                    // 异步请求组件配置     
                    axios.get(routes_config[i].component_url).then(response => {
                        resolve({
                            // response.data = "<h1>User</h1>"
                            template: response.data
                        })
                    })
                }
            })
        }
        return list
    })()
}

const router = new VueRouter(routes)
new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app');

Answer 1

感觉和httpVueLoader差不多的效果，可以看看源码咋整的

Answer 2

感谢 @toesbieya 看了下httpVueLoader的代码

将其做了如下修改

    function parseComponentURL(url) {

        var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);

        return {
            name: comp[2],
            url: comp[1] + comp[2] + (comp[3] === undefined ? '' : comp[3]) + comp[4]
        };
        // return {
        //     name: comp[2],
        //     url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
        // };
    }

然后在main.js中如下使用

import httpVueLoader from 'http-vue-loader'


// 将全局路由进行注册
var routes = {
    routes: (function() {
        var list = new Array()
        for (let i in routes_config) {
            list.push({
                path: routes_config[i].path,
                component: httpVueLoader(routes_config[i].component_url)
                // 异步组件
                // component: function(resolve, reject) {
                //     // 异步请求组件配置     
                //     axios.get(routes_config[i].component_url).then(response => {
                //         resolve({
                //             // response.data = "<h1>User</h1>"
                //             template: response.data
                //         })
                //     })
                // }
            })
        }
        return list
    })()
}

这样就会直接加载远程的URL组件，也就是读取远程的.vue文件的内容，然后不需要使用webpack的vue-loader插件就可以进行编译，完美