Как настроить компиляцию во время выполнения в Vue и Snowpack

#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 не входит в мои планы.