为什么我不能通过使用导入的包实例访问函数？

Question

我正在尝试使用 ES6 导入，但遇到了 vue-server-renderer 的问题。是similar to this question，但不完全相同。

当我运行这个时，我收到一条错误消息 TypeError: Cannot read property 'createBundleRenderer' of undefined：

import vueServerRenderer from 'vue-server-renderer'
const createRenderer = (serverBundle) =>
    vueServerRenderer.createBundleRenderer(serverBundle, {
        runInNewContext: false,
        template: fs.readFileSync(path.resolve(__dirname, indexFolder,'index.html'), 'utf-8')
    });

但如果我执行以下操作，则不会出错：

import {createBundleRenderer} from 'vue-server-renderer'
const createRenderer = (serverBundle) =>
    createBundleRenderer(serverBundle, {
        runInNewContext: false,
        template: fs.readFileSync(path.resolve(__dirname, indexFolder,'index.html'), 'utf-8')
    });

为什么我必须直接从 vue-server-renderer 导入函数？通过 vue-server-renderer 实例使用 vueServerRenderer.createBundleRenderer() 而不仅仅是 createBundleRenderer() 访问它有什么问题？

Answer 1

原因很简单，如果你去 'vue-server-renderer' 你会得到 {createBundleRenderer} 作为导出成员。

如果你想用like

import vueServerRenderer from 'vue-server-renderer'
const createRenderer = (serverBundle) =>
    vueServerRenderer.createBundleRenderer(serverBundle, {
        runInNewContext: false,
        template: fs.readFileSync(path.resolve(__dirname, indexFolder,'index.html'), 'utf-8')
    });

有些错误与导入有关，你应该像这样导入 import * as vueServerRenderer from 'vue-server-renderer' 它肯定对你有用