使用Ionic Vue的Stencil组件

Question

在关于框架与Vue集成的Stencil文档部分中有如下说明:

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

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

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

这与Vue 2有关。在Vue 3 (Ionic Vue使用)中，你必须使用isCustomElement，如这里所述。

遗憾的是，我这辈子都没法让Vue和Stencil好好相处。我试过这样设置配置:

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

然而，我不知道如何使用Ionic Vue实现上述任何建议。我一直在config.vue.js中摆弄chainWebpack，但到目前为止还没有成功。

任何帮助都将是非常感激的。

Answer 1

我不是Vue专家，但我是这样做的:

将以下内容添加到您的./vue.config.js(或者创建它，如果它不存在):

/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
// ignore Stencil web components
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('test-')
}
return options
})
},
}

这将指示Vue忽略test-*组件。来源:https://v3.vuejs.org/guide/web-components.html skipping-component-resolution

接下来，加载./src/main.ts中的组件。

导入模板项目:

import { applyPolyfills, defineCustomElements } from 'test-components/loader';

然后将createApp(App).use(router).mount('#app')替换为:

const app = createApp(App).use(router);
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements();
});
app.mount('#app')

来源:https://stenciljs.com/docs/vue

Answer 2

另外，如果有人正在使用vite2+，只需相应地编辑vite2 .config.js:

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('test-') // ✅ Here
}
}
}) ],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})