Элементы Vuetify не отображаются идеально на netlify после развертывания

Question

Моя команда и я разработали веб-сайт, используя VueJS. На одной из страниц мы использовали элементы Vuetify, такие как vue -extension-panel и v-card . Во время разработки мы запускаем с помощью npm run dev и все выглядит хорошо. Я полагаю, что все зависимости установлены правильно, как это было хорошо во время разработки.

Затем мы развернули Интернет с Netlify . После развертывания элементы Vuetify не отображаются правильно.

Ниже приведены изображения, которые сравниваются до и после развертывания в Netlify:

Вот пакеты. json:

Итак, было бы здорово, если бы кто-то мог объяснить, почему он не отображается должным образом, или если кто-то знает совместимость netlify с Vuetify.

Спасибо!

Answer 1

Вы можете использовать любую библиотеку с netlify. Когда вы используете $ vue add vuetify для добавления зависимости, все должно быть хорошо. Если вы установили его иначе, обязательно проверьте следующее:

Vuetify находится под dependencies в вашем пакете . json.

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

Вы исправляете это в своем основном. 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"
  ]
}