Vue 3中如何使用Vue.compile？以及运行时环境下Vue.$compile编译函数的迁移使用方法

嗨，我来帮你梳理下Vue 3里使用编译函数的方法，以及如何替代Vue 2中的Vue.$compile：

首先要明确：Vue 3将包含编译器的完整版和仅运行时版本做了更清晰的拆分，默认安装的是运行时版本（体积更小）。如果要使用compile函数，你需要先确保环境支持编译器。

1. 基础使用方式 #

场景一：使用完整版Vue #

如果你直接引入的是完整版的Vue包（比如UMD格式的vue.global.js），或者通过构建工具配置启用了运行时编译器，可以直接从vue中导入compile函数：

import { createApp, compile } from 'vue'

// 编译模板字符串
const { render, staticRenderFns } = compile('<custom-component />')

// 将编译后的渲染函数封装成组件
const DynamicComponent = {
  render,
  staticRenderFns
}

const app = createApp({})
app.component('dynamic-component', DynamicComponent)
app.mount('#app')

场景二：配置构建工具启用编译器 #

如果你的项目用的是Vite或Vue CLI，默认是运行时版本，需要修改配置来启用编译器：

• Vite：在vite.config.js中添加别名配置，指向完整版Vue：

  export default {
    resolve: {
      alias: {
        'vue': 'vue/dist/vue.esm-bundler.js'
      }
    }
  }
  

• Vue CLI：在vue.config.js中开启运行时编译器：

  module.exports = {
    runtimeCompiler: true
  }
  

2. 替代Vue 2中的Vue.$compile #

在Vue 2中你习惯的Vue.compile('<custom-component />')，在Vue 3中的核心逻辑是一致的，但有两个关键变化：

• compile不再挂载在Vue全局对象上，需要单独导入
• 返回值结构和Vue 2类似（包含render和staticRenderFns），可以直接用于组件定义

举个组件内部动态编译的例子：

<script setup>
import { compile, h } from 'vue'

// 模拟动态模板
const dynamicTemplate = '<custom-component />'
// 编译模板得到渲染函数
const { render } = compile(dynamicTemplate)

// 封装成可渲染的函数组件
const DynamicRenderer = () => render(h)
</script>

<template>
  <!-- 渲染动态编译的组件 -->
  <DynamicRenderer />
</template>

注意事项 #

• 运行时编译会增加最终包的体积，如果不是必须动态编译模板的场景，建议优先使用单文件组件（SFC），模板会在构建阶段提前编译
• 生产环境下要确保构建配置正确，否则会出现"模板编译错误"之类的提示

内容的提问来源于stack exchange，提问作者FlySky