时间戳

首页 > 解决方案 > 部署后 Vuetify 无法正确显示

css - 部署后 Vuetify 无法正确显示

问题描述

我构建了一个使用 vue.js 作为前端的 spa。具体来说，我将 vuetify 库用于许多组件和布局。该网站在本地运行时看起来很漂亮。我刚刚将它部署到 Azure，所有 vuetify 样式似乎都消失了。我编写的任何自定义 css 都已生效，但属于 vuetify 的任何内容都不会出现在其样式中。开发者控制台中没有错误消息。有什么见解吗？

标签： cssazurevue.jsdeploymentvuetify.js

解决方案

在您的plugins/vuetify.js文件中，确保您包含缩小的 vuetify CSS，如下所示（请参阅文档）：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css' // <<< THIS

Vue.use(Vuetify);

export default new Vuetify({
});

我错过了那条线并且有相同的症状 - 样式在本地看起来很好（元素中style包含很多标签head），但在 Azure 静态 Web 应用程序中却没有。

推荐阅读