如何解决如何在Vue和Snowpack中配置运行时编译
我正在尝试通过运行时编译获得 Vue 项目设置,但是我不太确定如何在 Snowpack 中对其进行配置。
基本上当前我运行项目时,出现黑屏,并显示通常的“ [Vue警告]:组件提供了模板选项,但此Vue构建不支持运行时编译。将捆绑程序配置为别名” vue“ ”到“ vue / dist / vue.esm-bundler.js” 。
当前我的文件如下所示:
snowpack.config.js:
/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: '/',src: '/_dist_',},plugins: [
'@snowpack/plugin-vue','@snowpack/plugin-dotenv'
],...
}
index.js:
import { createApp } from "vue";
// import App from "./App.vue";
import First from "./First.vue";
// const app = createApp(App);
const app = createApp({
data() {
return {
message: 'duck',}
}
});
app.component('first',First);
app.component('ducks',{
props: ['todo'],template: '<li>{{ todo }}</li>'
});
app.mount("#app");
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
import.meta.hot.accept();
import.meta.hot.dispose(() => {
app.unmount();
});
}
index.html:
...
<body>
<div id="app">
<p>stuff should be fine:</p>
<p>{{message}}</p>
<ul>
<li>hello</li>
<ducks todo="testing"></ducks>
<ducks todo="goats"></ducks>
<ducks todo="canoes"></ducks>
</ul>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/_dist_/index.js"></script>
</body>
...
我尝试添加别名,但这似乎没有任何作用:
snowpack.config.js
module.exports = {
...
plugins: [
'@snowpack/plugin-vue','@snowpack/plugin-dotenv'
]
...
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
有人知道我如何获得运行时编译设置吗?
谢谢, 马特
解决方法
我通过使用 import { createApp,h } from "vue/dist/vue.cjs.prod.js";
设法解决了这个问题。
但我不确定这是否会在未来产生其他问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。