仅生产构建错误：Vuetify 无法找到目标数据应用程序

Posted 2023-02-22

【中文标题】仅生产构建错误：Vuetify 无法找到目标数据应用程序

【英文标题】：Production build only error: Vuetify Unable to locate target data-app

【发布时间】：2019-11-07 19:44:31

【问题描述】：

我只在生产版本中收到此错误。

我已经阅读了这个doc 和这个相关的issue，但我仍然无法让它工作。 <v-app> 被v-dialog 缠住了，为什么还会报错？

这是我的代码

// App.vue
<template>
  <v-app id="inspire">
    <v-dialog max->
      <v-card>
        <v-card-title>
          Create
        </v-card-title>
      </v-card>
    </v-dialog>
  </v-app>
</template>

\\main.js
import Vue from "vue";
import store from "./store/store";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from "./App.vue";

Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue(
  el: "#app",
  store,
  render: h => h(App)
);

【问题讨论】：

尝试在v-dialog周围添加另一个template

堆栈跟踪显示了一个不寻常的组件层次结构，其中包含两个VApp（应该只有一个）。

我在使用 Vuetify 和 Vuepress 时遇到了同样的错误，大概是因为它没有使用 VApp。这个答案对我有用：***.com/a/60990132/9035706

【参考方案1】：

给目标添加data-app属性

<div data-app>
      <MyComponent />
</div>

【讨论】：

为什么有必要这样做？

这解决了我的问题，但我也很好奇 data-app 到底是干什么用的？我似乎找不到任何有关它的信息。

@Kellen Vuetify 要求您的应用程序由 v-app 包裹，然后自动为您添加此数据应用程序。所以理想情况下你应该这样做，否则按照这里的建议手动进行也应该有效。

【参考方案2】：

添加 v-app

<v-app>
      <MyComponent />
</v-app>

【参考方案3】：

对不起，这是我的错。我出现此错误的原因是因为在导入 vue js 文件的 html 中有两个 <script> 标签。所以它运行了两次。我删除了其中一个标签，现在它工作正常。

【参考方案4】：

我在通过 laravel-mix 和 vuetifyjs-mix-extension 使用 vuetify 时遇到了类似的错误。我在配置中添加了 webpack.mix.js vuetify-loader：

mix.js('src/js/app.js', 'js').vuetify('vuetify-loader').vue();