在Stencil docs中關于與Vue的框架集成的部分，它指出：
為了在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]: `compilerOptions`配置選項只有在使用包括運行時編譯器的Vue.js構建時（又稱 "完整構建"）才會被尊重。由于你使用的是僅運行時編譯器，`compilerOptions`必須在編譯設定中傳遞給`@vue/compiler-dom`。
- 對于vue-loader：通過vue-loader的`compilerOptions`加載器選項傳遞。
- 對于vue-cli：見https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- 對于vite：通過@vitejs/plugin-vue選項來傳遞。見https://github.com/vitejs/vite/tree/main/p
然而，我不知道如何使用Ionic Vue實作上述任何建議。我一直在config.vue.js中搗鼓chainWebpack，但到目前為止沒有成功。
如果能得到任何幫助，我們將不勝感激。
uj5u.com熱心網友回復：
我不是Vue的專家，但我是這樣做的：
將以下內容添加到你的應用程式中。
在你的./vue.config.js中添加以下內容（如果不存在，則創建它）：
/**。
* @type {import('@vue/cli-service').ProjectOptions }
*/ */
module.exports = {
// 忽略Stencil網路組件。
chainWebpack: config => {
config.module
.rule('vue'/span>)
.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中的組件。
匯入Stencil專案：
import { applyPolyfills, defineCustomElements } from 'test-components/loader'/span>;
然后將createApp(App).use(router).mount('#app')改為：
const app = createApp（App）。 use(router)。
//將自定義元素系結到視窗物件上。
applyPolyfills().then(() => {
defineCustomElements（）。
});
app.mount('#app'/span>)
來源。https://stenciljs.com/docs/vue
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/319143.html
標籤：