Как сделать все ресурсы локальными?

#vue.js #nuxt.js #vuetify.js

Вопрос:

Я делаю веб-приложение с Nuxt.js и дополнение Vuetify.

Он должен работать без Интернета. Теперь я получаю ошибку при загрузке css и шрифтов:

Как мне сделать все ресурсы локальными?

1. Можете ли вы показать нам некоторые из ваших настроек ( package.json nuxt.config.js отличное начало)? Трудно помочь вам только в этом. Кроме того, что вы пробовали до сих пор?

2. Это по умолчанию, как из коробки

3. В чем же заключается ваш вопрос? Вам действительно нужен учебник о том, как добиться этого с нуля? Это не так, как работает. Следовательно, ваш вопрос должен быть закрыт. Если у вас есть конкретная техническая проблема, мы можем помочь. Мы не должны делать всю работу за вас.

Ответ №1:

Это правильный вопрос, не знаю, почему в комментариях говорится иначе, просто он не очень четко сформулирован. Он спрашивает, как он мог бы загружать шрифты и css локально. Vuetify автоматически попытается извлечь шрифты и значки из CDN (которые вы увидите, если нажмете на запрос и проверите URL-адрес запроса). Вы должны установить значки и шрифты локально из NPM. Вот как вы устанавливаете значки локально.

Установка значков: npm устанавливает материал-дизайн-значки

в nuxt.config.js Добавьте css глобально

  css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],

 buildModules: [
      '@nuxtjs/vuetify',
      ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
    ]

Что касается шрифтов, вам нужно будет использовать аналогичный подход, если вы хотите, чтобы Vuetify загружал шрифты по умолчанию локально. Я лично использую nuxt-webfont-загрузчик, однако он действительно использует CDN, но делает это асинхронно. Вы можете попробовать поэкспериментировать с настройками vuetify, например, отключив настройки по умолчанию и добавив их в папку «Ресурсы», которая часто используется в Nuxt:

 vuetify: {
  treeShake: true,
  defaultAssets: {
    font: false,
    icons: 'mdi',
    },
}

1. Существует причина, по которой сообщество закрывает вопрос, он же «запрашивает учебные пособия». Здесь ОП не приложил абсолютно никаких усилий к своему вопросу и не показал никаких исследований или попыток достичь этого самостоятельно. Просто приходить и спрашивать, как что-то делать, — это не самый лучший способ делать что-то здесь. Кроме того, я мог бы полностью ответить на его вопросы, но это зависит от того, что он пытается сделать именно с помощью Vuetify/его шрифтов, а также, да, проклятых 10% работы, требуемой от него.