仍然可以在 Nuxt 生成的站点中使用运行时 DOM 操作吗？

Question

我有一个 Nuxt/Vue 项目，我用它通过 generate 命令预渲染单页网站（不是 SPA，而是静态通用模式）。所有静态 html 都正确呈现，但我想在 runtime 调用 Google Sheets API 并使用我收到的值更新 DOM。在 nuxt 生成后，Vue 的任何反应性是否仍然存在？还是我必须使用 vanilla javascript Nuxt 插件路由来进行 DOM 操作？

我们放置此代码的系统由 Adob​​e Experience Manager 提供服务，因此很遗憾，Nuxt SSR 是不可能的。

Answer 1

我找到了一种适合我的方法。 通过 nuxt.config 的 header 对象从 CDN 加载 Vue：

script: [
  {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'}
],

会导致 Vue 在运行时被加载。记住在我们进行运行时模板时使用编译器加载完整的包。现在仅为客户端创建一个插件（将模式设置为“客户端”或将文件命名为 my-script.client.js）并放置它在 ~/plugins 目录中：

plugins: [
  {src: '~/plugins/my-script', mode: 'client' }
],

在 my-script.js 中，您可以创建一个新的 Vue()，它将挂载 *.vue SFC：

import Vue from 'vue'; // Not sure if this is strictly required
import MyComponent from '@/components/MyComponent.vue';

new Vue({
  render: h => h(MyComponent)
}).$mount('#app');

显然，要使其工作，您需要在预渲染代码中使用 id 为 #app 的 div。