vue.js 3与esbuild a
我正在尝试在Rails应用程序中使用vue.js 3来使用一些组件，但我在Dev Console中遇到了此错误
[VUE警告]：组件提供的模板选项，但运行时编译不是 在这种VUE的构建中得到了支持。将捆绑器配置为别名“ 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/contents/contentes/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"
}
}
I am trying to use Vue.js 3 inside a Rails app to use a few components but I got this error in dev console
[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".
I tried installing using the "without build tools" version and it works.
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"
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Esbuild 没有包装盒的别名功能。只需直接导入ESM Bundler：
有一个用于配置别名
Esbuild-Plugin-Alias的插件：https://www.npmjs.com/package/esbuild-plugin-alias-alias
esbuild doesn't have an alias feature out of the box. Just import esm bundler directly:
There is a plugin for configuring aliases
esbuild-plugin-alias:https://www.npmjs.com/package/esbuild-plugin-alias