Question

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

2019-10-27

14873

javascript vue.js vuetify.js

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

我正在按照此处列出的教程进行操作，但我尝试在主页上添加导航，然后启动应用程序以查看其外观，结果发现页面为空白。我最终复制了教程代码，并仔细检查了我的 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 - [email protected]
Vue CLI - @vue/cli 4.0.5
Vuetify - [email protected]

我在 VSCode 终端中收到一条警告，其中显示

warning in ./src/plugins/vuetify.js

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

在我的 Web 控制台中

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 错误消失。

Answer 2

我也遇到了同样的情况，我意识到我只在 CLI 补充中下载了它，但忘记添加它了。为此，请在终端中写入：

vue add vuetify