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

Question

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

我正在学习此处列出的教程，但我已将导航添加到主页并启动应用程序以查看它的外观并注意到一个空白页面。我最终复制了教程代码并仔细检查了我的 javascript 设置并确保它已打开。我开始了一个新项目，它运行良好，显示了基本模板，但在添加 Vuetify 后，页面变成空白

很抱歉，如果没有启用 JavaScript，准备膳食将无法正常工作。请启用它以继续。

在控制台中。

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

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

按照@skirtle 问题的顺序，我通过vue create在终端中使用来创建项目。之后我启动了该应用程序，它显示了默认的 Vue 主页。然后我停止了服务器，然后使用vue add 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' 中找不到导出 'default'（导入为 'Vuetify'）

在我的网络控制台中

遗漏的类型错误：无法读取属性的'扩展'在Module.srcMixinsThemeableIndexTs未定义（vuetify.js ce5b：33332？）在webpack_require：在Module.srcComponentsVAppVAppTs（vuetify.js ce5b 30？）（vuetify.js ce5b：380？）在webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsVAppIndexTs (vuetify.js?ce5b:465) at webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsIndexTs (vuetify.js?ce5b:28810) at 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错误消失。