问题标签 [vue-ssr]

我已经使用带有打字稿和较少支持的 vue-cli (vue create) 创建了一个项目。

之后我添加了 vuetify（vue add vuetify）。一切都按预期工作。

但是在添加 ssr (vue add @akryum/ssr) 之后我得到了这个错误：

错误：使用 { runInNewContext: false } 时，包导出应该是一个函数

错误位置：node_modules\vue-server-renderer\build.dev.js:9353:14

我尝试创建一个没有打字稿的项目，并且 ssr 正在工作。只有当我添加打字稿时，才会出现此错误。

这是打字稿配置（tsconfig）问题还是其他地方的问题？

是否可以在 VUE SSR 中从组件进行重定向，而不会在服务器控制台上出现错误：[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client？

代码如下：

注意：如果我尝试使用this.$router.replace('/')（或任何其他方法），我会收到错误：[Vue warn]: Error in callback for watcher $route: ReferenceError: document is not defined.

在我的项目中，我在客户端进行了重定向，但我想知道这是否也可以从服务器完成。

我正在通过 Quasar 使用 Vue，页面通过 SSR 呈现。这工作得很好，但我有一个似乎行为不正常的组件。

问题是内容在服务器端正确呈现（通过检查 Chrome 中的网络日志来验证），使用 axios 调用将数据加载到元素中v-html，但是当我们进入浏览器时，状态似乎被重置并且在检查器中使用“元素”选项卡时，服务器端呈现的内容会丢失。

有任何想法吗？

Vue组件如下：

注意，我确实尝试将v-once属性添加到 div，但似乎没有影响。

环境：

• 类星体 1.1.0
• @quasar/cli 1.0.0
• @quasar/app 1.0.6
• NodeJS 10.15.3
• Vue 2.6.10（通过 Quasar 的依赖）

当 Nuxt 的 SSR 出现错误时，您如何处理错误？

目前我正在使用error()处理程序，但它在生产中不起作用？这是我的 Nuxt 应用程序的示例。

异步数据

错误.vue

当我nuxt用来开发我的项目时，我发现了一些问题。

我可以删除它或使用js文件替换它吗？

我试图在我的开发工具的帮助下弄清楚关于 Nuxt“通用”模式的基本知识，但我不确定我是否理解正确。

每次我在 Universal Nuxt 应用程序中请求新路由时，它似乎都会向 Node 服务器发送 200（OK）请求。我是否正确理解在每个页面请求中，节点服务器都会请求并提供一个新文档？

有些人声称即使在运行通用模式时，Node 服务器也只发送一个包，然后导航和后续页面在客户端加载，因此不再访问 Node 服务器，但事实并非如此，如何搜索引擎爬虫可以索引吗？

相反，基本上在每条新路由上，页面都会以预渲染的形式从节点服务器重新请求，对吗？这就是“通用”模式实际上对 SEO 友好的方式，因为爬虫可以查看所有页面并将其正确索引到 Google 或 Bing？

很抱歉，我只是 Nuxt 的初学者，我完全理解（我认为）SPA 和 Nuxt 生成模式是如何工作的，但目前这种通用模式对我来说仍然是个谜。

我将非常感谢对此的任何澄清！！！这对我的学习之旅非常有价值！谢谢！

我想移植我的 vue 指令来渲染服务器端。

客户端：

到目前为止我在 nuxt.config.js 中所做的工作：

我找不到元素参考。

我使用以下函数搜索节点对象：

我正在构建一个 laravel 应用程序，我的导航栏中的通知是一个 vueJS 组件。

我需要在服务器端渲染通知组件，老实说，我不知道从哪里开始，所有资源都用于渲染完整的 SPA 而不是单个组件。我正在为 SSR 使用https://github.com/spatie/laravel-server-side-rendering。

我一直在努力遵循这个Vue SSR 指南，在那个例子中，作者将他的 Express 路由放在一个名为server.js. 仅出于组织目的，我希望将我的 Express 路由保存router.express.js在我的src/router文件夹中的文件中，而不是server.js.

所以这是我router.express.js文件的精简版：

问题是我还需要将vue-server-renderer代码放在server.js文件中。然后，我会将应用程序设为require文件router.express.js，以便 Express 路由像这样工作：

每当我这样做时，我都会收到一个 Webpack 错误，指出

WebpackOptionsValidationError：配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- configuration.entry 'app'应该是一个字符串。

如果我从中删除vue-server-renderer代码，server.js它运行良好。但是在其中包含该代码的原因server.js是开发环境可以正常工作。基本上，如果代码不在，server.js那么我不能使用热重载或任何东西。

如果我摆脱router.express.js所有这些代码并将所有代码server.js包含在路由中，那么包括我的开发环境在内的一切都可以完美运行。

为什么我不能（或者更确切地说我怎么能）将我的 Express 路由保存在一个单独的文件中，并且仍然可以让这些vue-server-renderer东西正常工作？

更新：setup-dev-server.js文件：

在服务器端渲染期间获取内容时，我想使用 MySQL 作为数据源，因此我不需要创建外部 API 服务器来从数据库中获取数据。