Vue网站抱怨添加Vuetify后未启用JavaScript

Question

对我来说这有点困难，因为这是一条新的学习曲线，我不确定如何调试它。

我正在跟踪列出的Here教程，但我转到了将导航添加到主页的位置，并启动了该应用程序以查看其外观并注意到空白页。我最终复制了该教程代码，并仔细检查了我的JavaScript设置并确保它已打开。我启动了一个新项目，它在显示基本模板时工作正常，但是添加Vuetify后，页面变为空白，用

  

很抱歉，如果没有以下内容，则无法正常做饭   启用了JavaScript。请启用它以继续。

在控制台中。

我知道这样的问题是不允许的，但我不太确定还要寻找什么。

如果有人可以将我指向正确的位置或需要查看任何特定文件，请添加它。 谢谢

按照@skirtle问题的顺序， 我在终端中使用vue create创建了项目。 之后，我启动了该应用程序，它显示了默认的Vue主页。然后，我停止了服务器，然后使用vue add vuetify安装了Vuetify。但是，这之后是我的问题开始的时候。我再次启动了该应用程序，默认的vue主页只是一个空白页面，而开发控制台中的html如下。

除了安装此插件外，没有其他更改。

我的版本如下

• Vue-vue@2.6.10
• Vue CLI-@ vue / cli 4.0.5
• Vuetify-vuetify@2.1.6

我在VSCode终端中收到一条警告，指出

  

./ src / plugins / vuetify.js中的警告

     

在“ vuetify”中找不到“导出'默认'（导入为'Vuetify'）

在我的网络控制台中

  

未捕获的TypeError：无法读取未定义的属性“ extend”       在Module.srcMixinsThemeableIndexTs（vuetify.js？ce5b：33332）       在 webpack_require （vuetify.js？ce5b：30）       在Module.srcComponentsVAppVAppTs（vuetify.js？ce5b：380）       在 webpack_require （vuetify.js？ce5b：30）       在Module.srcComponentsVAppIndexTs（vuetify.js？ce5b：465）       在 webpack_require （vuetify.js？ce5b：30）       在Module.srcComponentsIndexTs（vuetify.js？ce5b：28810）       在 webpack_require （vuetify.js？ce5b：30）       在Module.srcIndexTs（vuetify.js？ce5b：30337）       在 webpack_require （vuetify.js？ce5b：30）

我希望这可以更好地了解我的问题。

Answer 1

我能够使用Vue CLI 3.8.4重现同样的问题。

似乎您遇到了不兼容的选项组合。我不完全知道问题出在哪里，但您正在使用的教程鼓励使用许多自定义配置选项，这使您更有可能陷入困境。给出答案的难度也更大，因为答案在一定程度上取决于您选择的选项的确切组合。

尽管如此，这里似乎确实有一个错误，尽管我不清楚它到底是哪个错误。我的猜测是Vuetify CLI插件。

此错误报告似乎有些相关：

https://github.com/vuetifyjs/vuetify/issues/9184

最简单的解决方法似乎是编辑文件vue.config.js并删除该行：

transpileDependencies: ["vuetify"]

但是，如果您确实想移植Vuetify，那就不好了。

这真的很复杂，很大程度上取决于您想要的设置。

在文件src/plugins/vuetify.js中，您应该找到两行，如下所示：

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

这不适用于转译。

这里有几种可能的方法，但尝试将它们更改为：

import Vuetify from "vuetify/lib";

如果启动服务器，则可能会看到另一个错误：

  

无法解析加载程序：sass-loader

     

您可能需要安装它。

Vuetify安装指南中有一些有关如何解决该问题的说明：

https://vuetifyjs.com/en/getting-started/quick-start#webpack-installation

但是，与其尝试手动完成所有这些操作，不如直接回到CLI并创建具有不同选项组合的项目，可能会更容易。如果不花时间和精力去尝试所有不同的排列，我无法确切地说出什么是行得通的，哪些行不通，但是通过快速实验，看来在项目创建过程中启用CSS Pre-processors可以使sass-loader错误消失。

Answer 2

它发生在我身上，我意识到我只在 CLI 补充中下载了它，但忘记添加它。 为此，请在终端中写入：

vue 添加 vuetify