HTTPS в Vite

HTTPS на локальном сервере шифрует страницу самодельным сертификатом, без настоящего домена.

Некоторые API браузера и проверки безопасности требуют защищённый протокол даже при локальной разработке. Пакет @vitejs/plugin-basic-ssl создаёт временный сертификат и включает HTTPS на сервере разработки. Установим его как зависимость разработки:

npm install @vitejs/plugin-basic-ssl --save-dev

Плагин подключают в массиве plugins файла настройки, а не только полем server.https без готового сертификата:

import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [
    basicSsl(),
  ],
})

На странице оставим простой текст для проверки:

document.body.textContent = 'hello';

Поднимем сервер разработки:

npm run dev

Откроем адрес https://localhost:5173. Браузер покажет предупреждение о самоподписанном сертификате: для учебного проекта его обычно принимают вручную, потому что домен не проходил проверку у центра сертификации. После подтверждения на экране появится слово hello, а соединение уже идёт по HTTPS.

Установите @vitejs/plugin-basic-ssl, подключите плагин в vite.config.js, выведите на странице слово ready и откройте https://localhost:5173.

Примите предупреждение браузера о сертификате и убедитесь, что в адресной строке протокол https, а на странице видно слово ready.