vite启用运行时模板编译器

发表于 分类于 评论次数： 阅读次数：
使用vite和vue3的时候，发现defineComponent方法template模板在开发环境可以，打包之后不生效，一顿搜索之后发现需要启用 runtime template compiler，即“运行时模板编译器”

  1. 开发过程中发现使用下面这段代码，打包之后template模板不生效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
        <comp />
    </template>
    <script setup lang='ts'>
    const comp = defineComponent({
        setup() {
            const count = ref(1)
            return {
                count
            }
        },
        template: '<el-button>add</button>'
    })
    </script>

  2. 在vue在线编辑器里面测试发现报了一个警告

    1
    2
    3
    Component provided template option but runtime compilation is not supported in this build of Vue. Use "vue.esm-browser.js" instead.
    at <Anonymous>
    at <Repl>

  3. 通过这个警告找到了vite的一个问题讨论 How to enable runtime template compiler?

  4. 然后这个上面给出了解决办法

    即在 vite.config.ts 中添加一个 alias vue: 'vue/dist/vue.esm-bundler.js'