Пустая страница при деплое, как исправить?

Question

[I_want_to_know]

Всем привет!
Подскажите пожалуйста, что я делаю не так при деплое проекта?
Суть вот в чем:
использую связку vite+react.
Через npm run dev сверстал что нужно и решил деплоить проект.
ctr+c (вышел из dev)
Ввел команду npm run build, появилась папка с проектом и со следующим содержимым:
- index.html
- vite.svg
- assets (в которой следующие файлы и папки:
- - index- sdfksjh.js
- - index - iuwew.css
- - kartinka- lie4k.jpg
При запуске index.html выводится белый экран без содержимого, в самом файле разметки которую я внес нет.

Comments

[Wispik]

При запуске index.html

Просто открываешь index.html в браузере? Конечно так не будет работать, какой-то сервер нужен

Answer 1

[Aleksey Solovyev]

Если вы просто открываете index.html в браузере, то у вас должны быть ошибки в консоле. Что-то тип:

[Error] Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0 (index-n_ryQ3BS.css, line 0)

Не дает загрузить файлы из-за безопасности.
Запустите какой сервере простой (live-server или python3 -m http.server) или используйте vite preview:

// package.json
  "scripts": {
    // ....
    "preview": "vite preview"
    // ....
  },

Comments

[I_want_to_know]

Благодарю за ответ!
Верно, ошибки есть:

Refused to apply style from '127.0.0.1:5500/assets/index-yFW6kyRy.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

127.0.0.1:5500/assets/index-7g7xi9sh.js net::ERR_ABORTED 404 (Not Found)

Я не понимаю, как это исправить...
npm run preview отрабатывает отлично.
Подскажите, как подготовить файлы к выгрузке?
Я думал, что vite это что-то на подобии gulp, в котором верстаешь всё что надо и потом деплоишь в папку dist (например), а содержимое можно выкладывать на хостинг.

[Aleksey Solovyev]

I_want_to_know, если в общем, то gulp и vite инструмента для сборки фронтенда, но с разными задачами/подходами. Gulp — это настраиваемый таск-раннер для автоматизации задач, а Vite — быстрый инструмент сборки с горячей перезагрузкой для современных фронтенд-проектов.

Из чего следует, что вам для базовой сборки проекта настраивать ничего не надо. Просто выполняете npm run build и vite все сделает за вас. Если после сборки вы откроете папку dist в редакторе, то заметите обычные статические файлы (минифицированные html, js, css). Они полностью готовы к выгрузке на сервер (можете проверить на GitHub Pages).

Вы под какой ОС работаете? Если unix, то из папки dist в терминале выполните python3 -m http.server и у вас должен заработать простой http сервер на 8000 порту (аналог обычного сервера если позволите), который должен отдавать ваше приложение без ошибок. Если будет ошибка, то проверьте пути до файлов (обычно какой "/" забывают).

Если ошибки все еще будут, то скиньте конфиг вашей сборки (в любой песочниц или на GitHub) - где-то намудрили. Вот для примера офф vite+react бойлерплейт. В нем все работает (и сборка, и деплой)