Vue 3 组件渲染在 Google Apps 脚本上不起作用答案

【问题标题】：Vue 3 component rendering not working on Google Apps ScriptVue 3 组件渲染在 Google Apps 脚本上不起作用
【发布时间】：2021-08-08 12:49:54
【问题描述】：

我开始使用 Vue 和 Vue 3 在 Google Apps Script 上编写应用程序。

我正在关注 Vue Mastery 教程，并且我发现了 @brucemcpherson 的这个惊人的例子，该例子是一个在 GAS 上工作的 Vue 2 应用程序，但对我来说太难理解某些部分了。

https://ramblings.mcpher.com/vuejs-apps-script-add-ons/

GitHub：https://github.com/brucemcpherson/bmVuetemplate

GAS 和 Vue 在处理组件时遇到了一些棘手的问题，我需要一些帮助。

这是我的文件：

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>
      </my-component></my-component>
    </div>
    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
    <?!= include("main-js"); ?>
    <?!= include("my-component"); ?>
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

utils.gs

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

main-js.html

<script>
  const app = Vue.createApp({
      data() {
          return {
              product: 'Socks'
          }
      }
  })
</script>

my-component.html

<script>
  app.component('my-component', {
    template: `<div>My component content</div>`,
    data() {
          return {
              product: 'Boots'
          }
      }
  })
</script>

我在控制台上收到警告：

dropping postMessage.. was from host https://script.google.com but expected host https://n-jogxx7ovu3afq6djr4pskwjsglfwozzlkf5baay-0lu-script.googleusercontent.com

两种情况都没有发生：在 index.html 充电时我看不到我的组件。

您知道可能是什么问题吗？谢谢！

【问题讨论】：

标签： javascript vue.js google-apps-script vuejs2 vuejs3

【解决方案1】：

你必须先启动 vue，然后挂载应用。不确定这是否是您的问题，但这是一个有效的代码笔。另外，我已经导入了 vue lib https://codepen.io/tzknc/pen/PopbOWW

<div id="app">
  <h1>{{ product }}</h1>
  <my-component/>
</div>

<script>
  // create the vue instance 
  const app = Vue.createApp({
    data() {
      return {
        product: 'Socks',
      }
    }
  });
  // add the component 
  app.component('my-component', {
    template: `
    <div>
      My component content | {{product}}
    </div>`,
    data() {
          return {
              product: 'Boots'
          }
      }
  })
  // mount it 
  const mountedApp = app.mount('#app')
</script>

【讨论】：

感谢您的快速回复，@tzknc。我不确定问题出在哪里，但您的代码在 Google Apps Script 上运行起来就像一个魅力。我的真实案例包括导入 Vuetify，但有些我无法在 GAS 上使用 Vue 成功包含 Vuetify css。因为它在标签上包含的接缝，所以它对我不起作用……但也许这应该是第二个问题。谢谢！
我刚刚读到 Vuetify 2x 与 Vue 3 不兼容...