vue3中提供了模板选项, 但在此版本的Vue中不支持运行时编译
文章 190 0 0 0
发布时间:2022年03月02日

概述

在vue3中使用template模板选项生成组件,控制台提示vue3中提供了模板选项, 但在此版本的Vue中不支持运行时编译

警告提示

 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
  at <App>

翻译

[Vue warn]:组件提供了模板选项,但在此版本的Vue中不支持运行时编译。将绑定器配置为别名“vue”为“vue/dist/vue.esm bundler.js”。在<App>

解决

在vue3中推荐使用render来生成模板组件,但我们也会用到template选项来生成组件

render使用

以下写法不会触发上面的警告,不会阻止运行,但会不满足我们的使用方式。

import { h } from 'vue'
<script>
export default {
    render() {
        return h('div')
    }
};
</script>
template使用

以下写法虽然满足我们的使用方式,但是会在vue3的环境下暴露出以上提示,阻止我们运行,根据提示我们可以把vue切换成vue/dist/vue.esm-bundler.js

<script>
export default {
    template: "<div></div>"
};
</script>

最终结果

引入的vue修改为vue/dist/vue.esm-bundler.js

import { h } from 'vue'

更改

import { h } from 'vue/dist/vue.esm-bundler.js'
评论专区