在生产中的 Nuxt 组件中没有调用挂载的钩子（完全静态）？

Posted 2023-02-22

【中文标题】在生产中的 Nuxt 组件中没有调用挂载的钩子（完全静态）？

【英文标题】：Mounted hook not being called in Nuxt component in production (full static)?

【发布时间】：2021-07-21 11:47:11

【问题描述】：

我有一个包含在 Nuxt 页面中的组件。

该组件具有以下生命周期钩子：

<script>
export default 
    name: 'MyComponent',
    created()  alert('oh hai!') ,
    mounted()  alert('oh hai again!') 

</script>

这在开发中运行良好。但是，当我导出站点完全静态（nuxt 生成）时，created 和mounted 挂钩中的代码不会运行——加载页面时不会出现警报。

我觉得我一定遗漏了一些明显的东西，但我想不通。如果在完整的静态 nuxt 站点上使用创建/安装的生命周期钩子，是否会在组件上调用它们？如果不是，那么推荐的初始化用于控制组件的代码的方法是什么？

【问题讨论】：

如果您只尝试console.log 会怎样？这两个警报可能会被丢弃，因为先是服务器端渲染，然后是客户端水合。不确定alert 在这种情况下的表现如何。 PS：created 在双方都可用，而mounted 仅在客户端可用：nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle 另外，您确实尝试在本地构建和运行它，还是仅在测试生成的构建时将其托管在某个地方？跨度>

嗨 Kissu——console.log 也出现了同样的问题——有趣的是，如果我将组件直接嵌入到布局中，问题就不存在了。仅当我将组件嵌入页面时才会发生这种情况。 （钩子也不会在页面根目录上触发。）

我也有类似的问题

【参考方案1】：

当更改类型导入需要组件时，我解决了类似的问题。不要与惰性导入调情；）

曾经：

components: 
    TheError,
    TheHeader,
    TheMain,
    'the-map': () => import(/* webpackPrefetch: true */ './TheMap')
,

挂载的钩子没有被调用

现在：

components: 
    TheError,
    TheHeader,
    TheMain,
    TheMap

有效！