如何在 Vue 和 Snowpack 中配置运行时编译
Posted
技术标签:
【中文标题】如何在 Vue 和 Snowpack 中配置运行时编译【英文标题】：How to configure runtime compilation in Vue and Snowpack 【发布时间】：2021-02-24 11:40:02 【问题描述】：我正在尝试通过运行时编译来设置 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'
有人知道我如何获得运行时编译设置吗？
谢谢， 马特
【问题讨论】：
【参考方案1】：我通过使用import createApp, h from "vue/dist/vue.cjs.prod.js"; 设法解决了这个问题。
但我不确定这是否会在未来产生其他问题。
【讨论】：
这条评论让我很开心！我正在尝试对某些东西进行原型设计，而摆弄 webpack 不在我的计划中。以上是关于如何在 Vue 和 Snowpack 中配置运行时编译的主要内容，如果未能解决你的问题，请参考以下文章
使用 snowpack, vue 和 electron 创建桌面应用程序
如何将 Routify 与 Snowpack 和 Svelte 一起使用