Проблема с Vue 3 + Vite + Quasar

Всем привет!;)

Я хотел бы поделиться с вами одной проблемой, которая возникла у меня сегодня при установке Vue, Vite и Quasar. Проблема небольшая и не отнимет у вас много времени, но я надеюсь, что эта статья будет кому-то полезна.

У меня возникли проблемы с иконками пребилда Quasar по умолчанию. При сборке dev-сервера я получил ошибку:

The request url «../vite-vue-quasar/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff» is outside of Vite serving allow list.

Та же ошибка была для иконок и всех дополнительных модулей Quasar.

У меня была следующая структура vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: '@/assets/styles/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})
Вход в полноэкранный режим Выход из полноэкранного режима

Совет здесь в том, что начиная с Vite v2.7 серверный строгий режим по умолчанию установлен в true, и он ограничивает обслуживание файлов вне корня рабочего пространства.

Ссылка на официальную документацию: https://vitejs.dev/config/#server-fs-strict

Ниже вы можете найти вариант решения этой проблемы с включенным строгим режимом, но я просто отключаю строгий режим.

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      strict: false,
    }
  },
Войти в полноэкранный режим Выход из полноэкранного режима

Спасибо за прочтение и буду рад услышать, если мое решение окажется недостаточно правильным;)

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *