部署后，Vuetify元素在netlify上的显示效果并不理想

Question

我的团队和我使用VueJS开发了一个网站。在其中一页中，我们使用了Vuetify元素，例如vue-extension-panels和v-card。在开发过程中，我们使用npm run dev运行，一切看起来都很好。我相信所有依赖项都已正确安装，因为在开发过程中看起来还不错。

然后，我们使用Netlify部署了Web。部署后，Vuetify元素似乎无法正确显示。

下面是在Netlify上部署之前和之后进行比较的映像：

这是packages.json：

所以，如果有人可以解释为什么它不能正确显示或知道netlify与Vuetify的兼容性，那将是很好的。

谢谢！

Answer 1

您可以将任何库与netlify一起使用。当您使用$ vue add vuetify添加依赖项时，一切都应该很好。如果没有安装，请确保检查以下内容。

Vuetify位于 package.json 中的dependencies下。

"dependencies": {
  "core-js": "^3.4.3",
  "vue": "^2.6.10",
  "vuetify": "^2.1.0"
}

您可以将其添加到您的 main.js

中

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

vuetify插件（src/plugins/vuetify.js）

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({});

您有一个 vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
}