Vue.js 3与Esbuild a

Question

我试图在Rails应用程序中使用Vue.js 3来使用一些组件，但我在dev控制台中遇到了这个错误。

Vue警告:组件提供了模板选项，但是在Vue的构建中不支持运行时编译。将您的bundler配置为别名"vue“为"vue/dist/vue.esm-bundler.js”。

我试着使用"没有构建工具“版本进行安装，结果成功了。

app/javascript/components/index.js

import { createApp } from 'vue'
import MyComponent from './dropdown'

document.addEventListener('DOMContentLoaded', function(){
    createApp(MyComponent).mount('#app')
})

app/javascript/components/dropdown.js

export default {
    data() {
        return {
            message: 'Hello Vue!'
          }
    },
}

app/views/index.html

<div id="app">{{ message }}</div>

package.json

{
    "vue": "^3.2.36"
  },
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

Answer 1

esbuild没有现成的别名特性。只需直接导入esm bundler：

import { createApp } from "vue/dist/vue.esm-bundler.js"

有一个用于配置别名esbuild-plugin-alias的插件

https://www.npmjs.com/package/esbuild-plugin-alias