常见问题

有一个问题?在创建问题表之前，请检查一些常见的错误。如果你仍然找不到解决办法，你可以在 Github 上提交一个 issue 或者在我们的 community 进行询问。

Search

由于 sass/scss 错误，我的应用程序无法编译

确保您使用的选项对象与您的 sass-loader 版本一致。

Open code snippet

  1. // webpack.config.js
  3. module.exports = {
  4.   rules: [
  5.     {
  6.       test: /\.s(c|a)ss$/,
  7.       use: [
  8.         'vue-style-loader',
  9.         'css-loader',
  10.         {
  11.           loader: 'sass-loader',
  12.           // Requires sass-loader@^7.0.0
  13.           options: {
  14.             implementation: require('sass'),
  15.             fiber: require('fibers'),
  16.             indentedSyntax: true // optional
  17.           },
  18.           // Requires sass-loader@^8.0.0
  19.           options: {
  20.             implementation: require('sass'),
  21.             sassOptions: {
  22.               fiber: require('fibers'),
  23.               indentedSyntax: true // optional
  24.             },
  25.           },
  26.         },
  27.       ],
  28.     },
  29.   ],
  30. }

是否有 v2 grid 与 v1.5 相对比的示例？

是的，您可以在这里查看 view grid examples here。

Error: Cannot find module ‘node-sass’

请检查本地项目 package.json 文件中的 @vue/cli packages 项至少是 ^3.5.0 版本

Invalid CSS after “ @content”: expected “}”, was “($material-light); “

请检查本地项目 package.json 文件中使用的是 sass 而不是 node-sass

我的代码不工作 - 我应该怎么办

首先，确保你使用的是最新版本的 Vue.js 和 Vuetfiy。然后尝试在 codepen 的 template 上复现你的问题。如果在外部环境中问题没有复现，这通常意味着问题是出在本地的环境。如果你仍然无法解决，请在 community 中的 #need-help 节点提供你的 codepen 和 issue。

我在控制台中收到了一个类似于下面的错误： $attrs is readonly 或者 $listeners is readonly

Vuetify 使用 Typescript，目前必须导入和继承 Vue 对象。在某些应用程序中，这可能会生成警告。目前有一个正在进行的 Github 讨论，为各种用例提供潜在的解决方案。如果你还有额外的问题，请加入我们的 在线社区。

我收到了一个类似于下面的错误：Error in ./node_modules/vuetify/src/dir/file.js Module parse “failed”: Unexpected token (:)

如果你使用像 IntelliJ IDEA 或 WebStorm 这一类的 IDE，它通常在你使用组件时会自动导入 vuetify/src/ 目录。请将导入设置中的 vuetify/src/ 改变为 vuetify/es5/。

在 codepen 上是否有带有路由的模板

有，Vuetify Codepen Router Template。

我如何扩展 Vuetify 组件

通过导入 Vuetify 组件，并使用 vue 中的 extends 选项，就可以很容易地进行扩展。Codepen 示例

Open code snippet

  1. import { VBtn } from 'vuetify/lib'
  3. const ActivateButton = {
  4.   extends: VBtn,
  5.   methods: {
  6.     genContent() {
  7.       return this.$createElement(
  8.         "div",
  9.         {
  10.           staticClass: "v-btn__contents "
  11.         },
  12.         ['Activate ', this.$slots.default]
  13.       );
  14.     }
  15.   }
  16. };

我的应用程序看起来不正常

Vuetify 需要使用 v-app 组件。它应该包裹着你的整个应用程序，是包括主题在内的大部分框架功能的中心点。请确保你在 Application 页面中使用了正确的标记方式。

菜单/对话框/侧边导航没有正常打开。

请检查你的组件在 v-app 在元素之中。如果你激活的元素未放入 activator 插槽里，请确保停止单击事件的传播。这些组件使用 v-outside-click 指令并且会立即关闭。

即使我的内容没有垂直溢出，但是滚动条也会显示。

Vuetify 使用 ress reset 来重置滚动条在不同浏览器中的默认行为。我们对这个选择进行了多次讨论。使用它有利有弊，目前社区投票的结果是保留使用它。如果你希望禁用此功能，请在你的样式文件中添加 html { overflow-y: auto }。

如何垂直居中

将 fill-height prop 应用在 v-container。这个助手类只会添加 height: 100%，但是对于 container 来说，它会寻找子元素 v-layout 并且按照所需的类来垂直居中你的内容。

我访问 / 和 /home page 都会出现 active 样式

为指向路由的绝对链接 /. 添加 exact。更多信息请查阅官方路由 文档。

我的页面在手机中不是响应式的

请检查在 index.html 中 <head> 部分拥有正确的 meta 标记。

Open code snippet

  1. <!-- index.html -->
  3. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  6. </head>
  7. </html>

我应该怎么使用 Font Awesome, Material Design Icons or Material Icons?

请参阅我们的 icon guide。

我的对话框中点击按钮后立即关闭

例如，在 v-menu 和 v-dialog 未使用 activator 插槽时，你必须使用点击事件来手动停止 propagation_。非常简单的，添加 _.stop 来修改点击事件。

Open code snippet

  1. <!-- Vue Component -->
  3. <template>
  4.   <div>
  5.     <v-dialog v-model="dialog">
  6.       <v-card>...</v-card>
  7.     </v-dialog>
  9.     <v-btn @click.stop="dialog = true">
  10.       Open Dialog
  11.     </v-btn>
  12.   </div>
  13. </template>
  15. <script>
  16.   export default {
  17.     data: () => ({
  18.       dialog: false,
  19.     }),
  20.   }
  21. </script>

Relative 图像在 v-card , v-img 和其他自定义 vuetify 组件中无法正常工作

Vue loader 会自动地把相对路径转换为 require 函数。然而在定制组件中 Vue loader 不会做这样的处理。您可以通过显式使用 require 函数来避免这个问题。如果您正在使用 Vuetify 为 Vue CLI 提供的插件，您可以编辑项目中的 vue.config.js 来修改 vue-loader 的配置项。

Open code snippet

  1. <!-- Vue Component -->
  3. <template>
  4.   <div>
  5.     <!-- Incorrect -->
  6.     <v-img src="../path/to/img" />
  8.     <!-- Correct -->
  9.     <v-img :src="require('../path/to/img')" />
  10.   </div>
  11. </template>

我应该如何升级到最新版本

所有需要的更改都在我们发布的 升级指南 中注明。

如何报告错误或请求一个功能

为了确保提供所有所需的信息，我们已经创建了一个 Issue Generator 帮助您实现这个过程。任何不使用生成器创建的问题将自动关闭，所以请使用它。

vuetify-loader 没有加载所有组件

Vuetify-loader 在 dynamic 组件中有局限性。请查阅 limitations 获取更多信息。

1.5 版本将被支持多久？

到 2020 年 7 月，可以在 Long-term Support page 上参阅更多信息。

我在哪里能看到 v1.5 的文档？

https://v15.vuetifyjs.com

[Vue warn]: Unknown custom element:

请检查 package.json 中使用的是最新版本的 vue-cli-plugin-vuetify 和 vuetify-loader

SCRIPT5022: Expected identifier, string or number

为了支持 vue-cli-3 中的 modern mode，vuetify/lib 没有被转译。你必须告诉 vue-cli 转译 vuetify 包。这在安装 Vuetify cli 插件时就自动配置了。如果你使用的是老版本，只需要简单的将 ‘vuetify’ 添加到 vue.config.js 中的 transpileDependencies 数组里面。

添加 typescript 时 - Error: Could not find a declaration file for module ‘vuetify/lib’

在您的 tsconfig 文件中添加以下内容：

Open code snippet

  1. // tsconfig.json
  3. {
  4.   "compilerOptions": {
  5.     "types": ["vuetify"]
  6.   }
  7. }