VUE JS 3 TypeError: vue.initDirectivesForSSR不是一个函数

Question

我试着用这个配置来构建我的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)

谢谢你们

Answer 1

尝试更新您的Vue 3版本。

我的@ Vue /server-renderer包是3.2.20，我的Vue版本是3.2.6。我把我的Vue版本升级到了3.2.20，现在运行得很好。:)