一、報錯：

[WXTAG]?[JSCORE]?The?slot?<template>?or?<script?type="text/wxtag-template"> of <wx-open-launch-weapp> is missing

二、源碼

官方源代碼如下，<script type="text/wxtag-template"></script > 這段代碼，網上也有用?template 標簽的。

<wx-open-launch-weappid="launch-btn"appid="wx12345678"path="pages/home/index?user=123&action=abc"
><script type="text/wxtag-template"><style>.btn { padding: 12px }</style><button class="btn">打開小程序</button></script>
</wx-open-launch-weapp>
<script>var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});
</script>

當我直接在Vue3中用上邊代碼運行會報錯：

[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.

報錯原因：

這個報錯信息通常出現在使用客戶端渲染的前端框架中，當你在組件中使用了<script>或<style>標簽，并且這些標簽帶有副作用時。

報錯解釋：

在客戶端渲染的前端框架中，組件通常被視為無副作用的函數，這意味著組件的渲染不應該有任何副作用，例如修改全局狀態或外部資源。<script>和<style>標簽如果用于注入JavaScript或CSS，可能會導致副作用。

三、解決思路

其實官方給的代碼樣例，我們是不能直接用在Vue中的，往往這樣的?template?標簽直接給編譯沒有了。

所以我們考慮用動態生成組件的辦法來，生成標簽，就可以解決這個問題了，到目前為止，這是我找到的最好的解決方案。

替換：

<script>// JS CODE HERE
</script>

通過以下方式：

<component :is="'script'">// JS Here
</component>

這里我試了??template?script 這兩個標簽動態生成，此時會報如下錯誤：

[WXTAG]?[JSCORE]?The?slot?<template>?or?<script?type="text/wxtag-template"> of <wx-open-launch-weapp> is missing

是因為?script 標簽還有個 type="text/wxtag-template" 屬性導致的，如果我們將這個type屬性也動態生成好，不就可以解決問題了。

<wx-open-launch-weappid="launch-btn"appid=""path="pages/index/index"
><component :is="'script'" v-bind="{type:'text/wxtag-template'}"><div>測試打開小程序</div></component>
</wx-open-launch-weapp>

果然完美解決問題~~~ 親測親測~~~~ 坑哭了~~~~

四、總結

主要有兩個原因導致，第一個Vue 中的?template 標簽和微信官方要求template標簽不是一個東西。第二個Vue中?script 標簽 不能隨便在視圖部分插入并破壞屬性。基于以上問題我們可以通過動態生成組件標簽的方案來解決。

組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以?is?特性擴展。