Как выставить настройку whitespace: ‘preserve’ при использовании vite?

Для того чтобы выставить настройку whitespace: 'preserve' при использовании Vite в проекте на Vue.js, необходимо произвести несколько шагов.

1. Установка зависимостей:
Сначала убедитесь, что в вашем проекте установлен пакет @vitejs/plugin-vue.
Если он отсутствует, выполните команду:

   npm install @vitejs/plugin-vue --save-dev

или, если вы используете Yarn:

   yarn add -D @vitejs/plugin-vue

2. Добавление настройки в vite.config.js:
В корневой директории вашего проекта создайте файл vite.config.js, если его еще нет.
Внутри файла добавьте следующий код:

   import vue from '@vitejs/plugin-vue';

   export default {
     plugins: [
       vue({
         template: {
           compilerOptions: {
             whitespace: 'preserve'
           }
         }
       })
     ]
   }

3. Перезапустите сборку:
После добавления настройки в vite.config.js перезапустите сервер разработки или сборку проекта, чтобы изменения вступили в силу.

После выполнения этих шагов настройка whitespace: 'preserve' будет применена к шаблонам Vue компонентов в вашем проекте, и пробельные символы в их содержимом будут сохранены без удаления или замены. Это особенно полезно, когда вы пишете код, в котором требуется точное отображение пробелов или когда вам нужно сохранить форматирование HTML-шаблонов.