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

Question

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

我已经阅读了这篇doc和相关的issue，但我仍然无法让它工作。

<v-app>

缠绕在

v-dialog

周围，为什么它仍然抱怨？

这是我的代码

// App.vue
<template>
  <v-app id="inspire">
    <v-dialog max-width="500px">
      <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)
});

Answer 1

向目标添加

data-app

属性

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

Answer 2

添加v应用程序

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

Answer 3

对不起，是我的错。我出现这个错误的原因是因为导入vue js文件的html中有两个

<script>

标签。所以它运行了两次。我删除了其中一个标签，现在工作正常。

Answer 4

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

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

Answer 5

我遇到了同样的问题，只需将 v-app 添加到您的 App.vue 主模板中

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