Question

repo git：https://github.com/darkiron/SSR-vue-template 分支机构：https://github.com/darkiron/SSR-vue-template/tree/sass （无礼）

我尝试在sass-loader的includePaths中更新vue-loader以提取sass 对于webpack：但是当我编译时会出现此错误：

TypeError：（0，_app.createApp）不是一个函数在es5_server_entry.js：441：39 在新的Promise（）在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 在新的Promise（）在/Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js:8372:14 在Object.renderToString（/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 [作为handle_request]（/Users/vincent/Desktop/SSR-vue-template/node_modules/express/lib/router/layer.js:95:5）在下一个（/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 }
}

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

Answer 1

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

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

1 个答案: