如何从 Vue 单文件组件访问 app 对象？答案

【问题标题】：How to access the app object from a Vue single file component?如何从 Vue 单文件组件访问 app 对象？
【发布时间】：2021-10-27 17:42:22
【问题描述】：

My end goal：我在组件模板 (<gcse:searchresults-only>) 中使用自定义 HTML 元素，我想使用 register the element with Vue。该页面给出的注册自定义元素的方法是通过app.config.compilerOptions.isCustomElement。

但我使用的是 single file component 并且未定义全局 app 对象。有没有办法获得它？或者是否有另一种方法可以从单个文件组件中设置配置选项？

我需要在这个组件之外设置它吗？我想，因为我在这里只使用这个自定义元素，所以只有这个文件必须知道它而不是在某些全局上下文中管理它是有意义的。

以防万一，我实际上是在 Gridsome 内执行此操作。

【问题讨论】：

标签： javascript vue.js vuejs2 gridsome

【解决方案1】：

我们就是这样做的（就像在文档中一样）。我认为让它在全球范围内可用是很好的，因为它还会有一堆 ESLint 警告等

vue.config.js

module.exports = {
  chainWebpack: config => {
    // ignore errors about external custom html elements
    config.module.rule('vue').use('vue-loader').tap(options => ({
      ...options,
      compilerOptions: {
        isCustomElement: tag => tag === 'gcse:searchresults-only',
      },
    }));
  },
};

【讨论】：