如何在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"; 设法解决了这个问题。

但我不确定这是否会在未来产生其他问题。