时间戳

首页 > 解决方案 > 仍然可以在 Nuxt 生成的站点中使用运行时 DOM 操作吗？

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

问题描述

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

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

标签： javascriptvue.jsnuxt.js

解决方案

我找到了一种适合我的方法。通过 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。

推荐阅读