Rails+Esbuild集成Vue3时提示不支持运行时编译如何解决

Vue 3 针对不同使用场景提供了不同的构建产物，你当前通过npm安装后，打包工具默认加载的是仅运行时版本（vue.runtime.esm-bundler.js），这个版本剔除了模板编译器，不支持在运行时解析template配置项、或是挂载DOM节点内写的模板字符串（比如你在#app节点里写的{{ message }}）。
你之前用无构建的CDN版本可以正常运行，是因为CDN默认提供的是带编译器的全量版本，自带运行时模板编译能力，所以不会触发这个报错。

根据你的需求二选一即可。

方案1：配置打包别名，使用带编译器的Vue版本 #

你当前使用esbuild作为打包工具，只需要在esbuild配置文件中添加别名映射，将vue的导入路径指向带编译器的ESM构建产物即可。
打开项目根目录下的esbuild.config.js，在配置项中添加alias字段：

const esbuild = require('esbuild')

esbuild.build({
  // 保留你原有的entryPoints、outdir、bundle等所有配置
  alias: {
    vue: 'vue/dist/vue.esm-bundler.js'
  },
  // 其余原有配置保持不变
}).catch(() => process.exit(1))

修改完成后重新执行npm run build重新打包资源，报错就会消失，你写在HTML节点内、组件template选项里的模板都可以被正常解析。

方案2：使用默认运行时版本，移除运行时编译依赖（推荐生产环境使用） #

运行时版本相比全量版本体积小30%左右，性能更好，不需要修改打包配置，只需要调整代码写法，避免在运行时传入模板字符串即可：

• 不要在挂载的DOM节点内写模板内容，把app/views/index.html里的挂载点改成空节点：

<div id="app"></div>

• 组件的模板不要依赖运行时解析，可以直接写render函数，或者后续引入esbuild的Vue插件支持.vue单文件组件（单文件组件的模板会在构建阶段提前编译，不需要运行时编译器）。以render函数写法为例，修改app/javascript/components/dropdown.js：

import { h } from 'vue'
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  render() {
    return h('div', this.message)
  }
}

改完重新打包即可正常运行。

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