首页 文章

wepack4 vuejs ssr es5：（0，_ app.createApp）不是函数

提问于
浏览 次
0

repo git：https://github.com/darkiron/SSR-vue-template branche：https://github.com/darkiron/SSR-vue-template/tree/sass（sass）

我尝试在webpack的sass-loader的includePaths中更新vue-loader for extract sass：但是当我编译时获取此错误：

TypeError：（0，_ app.createApp）不是es5_server_entry.js上的函数：441：39 at new Promise（）at module.exports ../ src / entry-server.js.exports.default（src / entry- server.js：4：8）/Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js:8375:43 at new Promise（）at / Users / vincent / Desktop /在Object.renderToString上的SSR-vue-template / node_modules / vue-server-renderer / build.js：8372：14（/Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js ：8564：9）在app.get（/Users/vincent/Desktop/SSR-vue-template/server.js:64:11）在Layer.handle [as handle_request]（/ Users / vincent / Desktop / SSR-vue） -template / node_modules / express / lib / router / layer.js：95：5）at next（/Users/vincent/Desktop/SSR-vue-template/node_modules/express/lib/router/route.js:137:13 ）

我的入口服务器只导入我的app.js：

import { createApp } from './app'

export default context => {
    return new Promise(
        (resolve, reject) => {
            const { app, router, store } = createApp()

            router.push(context.url)

            router.onError((err) => {
                console.log(err)
            })

            router.onReady(() => { 

                const matchedComponents = router.getMatchedComponents()

                if(!matchedComponents.length){
                    return reject({ code: 404})
                }

                Promise.all(matchedComponents.map(
                    component => {
                        if(component.asyncData) {
                            return component.asyncData({
                                store, 
                                route: router.currentRoute
                            })
                        }
                    }
                )).then(() => {
                    context.state = store.state
                    resolve(app)
                }).catch(reject)

            }, (reject) => { console.log(reject)})
        }
    )
}

和我的app.js：

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'
import { sync } from 'vuex-router-sync'
import metaMixin from './Utils/meta-mixin'
import filters from './Utils/filters'

Vue.mixin(metaMixin)
Vue.use(filters)


export function createApp () {
    const router = createRouter()
    const store = createStore()

    // synchroniser pour que l'état de la route soit disponible en tant que donnée du store
    sync(store, router)

    const app = new Vue({
        router,
        store,
        render: h => h(App)
    })

    return { app, router, store }
}

哪里有问题，我不明白，我会疯了

webpack vuejs2 ecmascript-5 ssr

1 回答

  • 0

    webpack生成的代码：

    /***/ "./src/entry-server.js":
/*!*****************************!*\
  !*** ./src/entry-server.js ***!
  \*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _app = __webpack_require__(/*! ./app */ "./src/app.vue");

exports.default = function (context) {
    return new Promise(function (resolve, reject) {
        // const { app, router, store } = createApp()
        var _ref = new _app.createApp(),
            app = _ref.app,
            router = _ref.router,
            store = _ref.store;

        router.push(context.url);

        router.onError(function (err) {
            console.log(err);
        });

        router.onReady(function () {

            var matchedComponents = router.getMatchedComponents();

            if (!matchedComponents.length) {
                return reject({ code: 404 });
            }

            Promise.all(matchedComponents.map(function (component) {
                if (component.asyncData) {
                    return component.asyncData({
                        store: store,
                        route: router.currentRoute
                    });
                }
            })).then(function () {
                context.state = store.state;
                resolve(app);
            }).catch(reject);
        }, function (reject) {
            console.log(reject);
        });
    });
};

    似乎webpack搜索app.view而不是app.js

    回复于

相关问题