VUE JS 3 TypeError：vue.initDirectivesForSSR 不是函数答案

【问题标题】：VUE JS 3 TypeError: vue.initDirectivesForSSR is not a functionVUE JS 3 TypeError：vue.initDirectivesForSSR 不是函数
【发布时间】：2021-11-23 18:44:42
【问题描述】：

我尝试使用此配置构建我的 vue Web 应用程序，但我遇到了这些错误，我已经尝试过这个问题，但我找不到和我遇到同样问题的人。我该如何处理这个问题，顺便说一下构建成功，当我尝试运行node src/server.jsx 时发生了问题？提前致谢

$ node src/server.jsx
D:\myPathProject\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:994
vue.initDirectivesForSSR();
    ^

TypeError: vue.initDirectivesForSSR is not a function
    at Object.<anonymous> (D:\myPathProject\node_modules\@vue\server-renderer\dist\server
-renderer.cjs.js:994:5)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (D:\myPathProject\node_modules\@vue\server-renderer\index.js:6:
20)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

这是我的vue.config.js 文件

/* eslint-disable @typescript-eslint/no-var-requires */
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const nodeExternals = require("webpack-node-externals")

exports.chainWebpack = (webpackConfig) => {
  if (!process.env.VUE_APP_SSR) return

  webpackConfig
    .entry("app")
    .clear()
    .add("./src/main.server.ts")

  webpackConfig.target("node")
  webpackConfig.output.libraryTarget("commonjs2")

  webpackConfig
    .plugin("manifest")
    .use(new WebpackManifestPlugin({ fileName: "ssr-manifest.json" }))

  webpackConfig.externals(nodeExternals({ allowlist: /\.(css|vue)$/ }))

  webpackConfig.optimization.splitChunks(false).minimize(false)

  webpackConfig.plugins.delete("hmr")
  webpackConfig.plugins.delete("preload")
  webpackConfig.plugins.delete("prefetch")
  webpackConfig.plugins.delete("progress")
  webpackConfig.plugins.delete("friendly-errors")
}

这是我的server.jsx 文件

/* eslint-disable @typescript-eslint/no-var-requires */
const express = require("express")
const path = require("path")
const { createSSRApp } = require("vue")
const { renderToString } = require("@vue/server-renderer")

const manifest = require("../dist/ssr-manifest.json")

const server = express()

const appPath = path.join(__dirname, "../dist", manifest["app.js"])

const App = require(appPath).default

server.get("*", async (_req, res) => {
  const content = createSSRApp(App)
  const appContent = await renderToString(content)

  const html = `
    <html>
      <head>
        <title>Hello</title>
      </head>
      <body>
        ${appContent}
      </body>
    </html>
  `

  res.end(html)
})

server.listen(8080)

谢谢大家

【问题讨论】：

标签： javascript node.js vue.js webpack

【解决方案1】：

尝试更新您的 Vue 3 版本。

我的 @vue/server-renderer 包是 3.2.20，我的 Vue 版本是 3.2.6。我将 Vue 版本升级到 3.2.20，现在运行良好。 :)

【讨论】：

嗨 @tomdevin 你有同样的错误吗？
我做到了，是的。更新后已修复。