Vue 3 模板片段创建错误

Question

-- 更新--

对于这个问题，我忘了提及我正在使用 Laravel Mix 来捆绑我的代码。

webpack.mix.js

const mix = require("laravel-mix");
mix
  .js("src/js/index.js", "dist/js")
  .vue()
  .version()
  .js("src/js/popup.js", "dist/js")
  .vue()
  .version()
  .js("src/js/background.js", "dist/js")
  .version()
  .sass("src/css/main.scss", "dist/css")
  .sass("src/css/popup.scss", "dist/css")
  .copy("src/assets", "dist/assets")
  .copy("src/html", "dist/html")
  .copy("src/manifest.json", "dist")
  .setPublicPath("./")
  .options({ processCssUrls: false });

当我这样设置时，webpack 默认使用 Vue 2。澄清一下，Vue 2 非常适合我的项目。我只想要 Vue 3.

的附加功能

从documentation that's listed on Laravel Mix开始，我应该这样做是为了指定Vue 3

mix.js('src/app.js', 'dist').vue({ version: 3 });

当我像这样配置 webpack.mix.js 时，它最终会抛出错误 Can't resolve 'vue' in path/to/file

-- 原创 --

尝试在 Vue 3 中使用 Fragments 但它们不起作用。

这是我的代码

<template>
  <div class="container">
    <div v-if="tab === 'options'">
      <Options />
    </div>
    <div v-else-if="tab === 'updates'">
      <Updates />
    </div>
    <div v-else-if="tab === 'account'">
      <Account />
    </div>
  </div>
  <md-bottom-bar md-type="shift">
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'options')"
      id="bottom-bar-item-options"
      md-label="Options"
      md-icon="home"
    />
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'updates')"
      id="bottom-bar-item-updates"
      md-label="Updates"
      md-icon="pages"
    />
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'account')"
      id="bottom-bar-item-account"
      md-label="Account"
      md-icon="favorite"
    />
  </md-bottom-bar>
</template>

这是错误：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

阅读 documentation 后，它提到：In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.

不过我认为我没有传递任何属性。在我不知情的情况下，我还能是运行 Vue 2 吗？

Answer 1

据我所知，这段代码在 vue3 中应该可以完美运行。所以这实际上可能是版本控制问题。

检查您的 package.json“vue”版本应该是 3.x.x。将其更改为 3.x.x 后，您将需要运行 npm install 或 yarn install.

还有一个小技巧，您可以使用动态组件代替多个 v-ifs：
<component :is="tab"></component>

参见：https://vuejs.org/v3/guide/components-dynamic-async.html

Vue 3 模板片段创建错误

Vue 3 Template Fragments creating errors

laravel

vue.js

laravel-mix

laravel-mix-vue3