#javascript #node.js #vue.js #webpack
Вопрос:
Я пытался создать свое веб-приложение vue, используя эту конфигурацию, но у меня возникли эти ошибки, я пытался решить эту проблему, но я не могу найти кого-то, у кого та же проблема, что и у меня. Как я могу решить эту проблему, судя по тому, как сборка прошла успешно, проблемы возникли при попытке запуска node src/server.jsx
? Заранее спасибо
$ node src/server.jsx
D:myPathProjectnode_modules@vueserver-rendererdistserver-renderer.cjs.js:994
vue.initDirectivesForSSR();
^
TypeError: vue.initDirectivesForSSR is not a function
at Object.<anonymous> (D:myPathProjectnode_modules@vueserver-rendererdistserver
-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:myPathProjectnode_modules@vueserver-rendererindex.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)
Спасибо вам, ребята
Ответ №1:
Попробуйте обновить свою версию Vue 3.
Мой пакет @vue/сервер-визуализатор был 3.2.20, а моя версия Vue была 3.2.6. Я увеличил свою версию Vue до 3.2.20, и теперь она отлично работает. 🙂
Комментарии:
1. привет @tomdevin у вас такая же ошибка?
2. Я так и сделал, да. Теперь это исправлено после обновления.