#javascript #vue.js #vuejs3 #snowpack
#javascript #vue.js #vuejs3 #снежный покров
Вопрос:
Я пытаюсь настроить проект Vue с помощью компиляции во время выполнения, но я не совсем уверен, как настроить это в Snowpack.
В принципе, в настоящее время, когда я запускаю проект, я получаю пустой экран и обычную опцию «[Vue warn]: компонент предоставил шаблон, но компиляция во время выполнения не поддерживается в этой сборке 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";
.
Но я не уверен, что это создаст другие проблемы в будущем.
Комментарии:
1. Этот комментарий сделал мой день! Я пытаюсь создать что-то прототипное, и возиться с webpack не входит в мои планы.