Vue3忽略自定义模板组件提示

为了在 Vue 应用程序中使用自定义元素库， 必须修改应用程序以定义自定义元素和通知 Vue 编译器在编译过程中忽略哪些元素。

根据同一页面，这可以通过修改 Vue 实例的配置来实现，如下所示：

Vue.config.ignoredElements = [/test-\w*/];

然而，这是Vue 2 的写法

对于 Vue 3，您必须使用 isCustomElement，如下所示

app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)

但这会导致 Vue 在控制台中抛出以下警告：

[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/p

指示 Vue 忽略组件
来源： https://stackoverflow.com/questions/69119951/using-stencil-components-with-ionic-vue

默认情况下，Vue 将尝试将非原生 HTML 标签解析为已注册的 Vue 组件，然后再回退到将其渲染为自定义元素。

这将导致 Vue 在开发过程中发出“无法解析组件”警告。

为了让 Vue 知道某些元素应该被视为自定义元素并跳过组件解析，我们可以指定compilerOptions.isCustomElement

如果你在构建设置中使用 Vue，该选项应该通过构建配置传递，因为它是一个编译时选项。

示例浏览器内配置

// Only works if using in-browser compilation.
// If using build tools, see config examples below.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')

示例 Vite 配置

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}

示例 Vue CLI 配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }))
  }
}