javascript - Vue 网站提示添加 Vuetify 后 JavaScript 未启用

Question

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

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

We're sorry but meal-prep doesn't work properly without JavaScript enabled. Please enable it to continue.

在控制台中。

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

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

按照@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 终端中收到警告

warning in ./src/plugins/vuetify.js

"export 'default' (imported as 'Vuetify') was not found in 'vuetify'

在我的网络控制台中

Uncaught TypeError: Cannot read property 'extend' of undefined at Module.srcMixinsThemeableIndexTs (vuetify.js?ce5b:33332) at webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsVAppVAppTs (vuetify.js?ce5b:380) at 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) at Module.srcIndexTs (vuetify.js?ce5b:30337) at 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";

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

Failed to resolve loader: sass-loader

You may need to install it.

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

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

但是，与其尝试手动完成所有这些操作，您可能会发现返回到 CLI 并使用不同的选项组合创建项目会更容易。如果不花费数小时尝试所有不同的排列，我无法确定到底什么有效，什么无效，但从快速实验来看，似乎在项目创建期间启用 CSS 预处理器 sass-loader 错误消失了。