Чтобы заработали Javascript и CSS в собранном сборщиком файле, в том числе для React, Vue; нужно:
1) убрать и изменить стоп-атрибуты в HTML,
2) сменить абсолютные пути на относительные в ссылках запуска бандлов, стилей и в картинках.
На июль 2025 у Хрома имеются такие "затыки".
*)
атрибуты "crossorigin" останавливают с ошибкой в отладчике - убрать эти атрибуты у <script> и <link>
*)
в скриптах сборщик проекта пишет &script
type="module" ... - это локально не запускается. Заменить на &script type="text/javascript" ..., причём без слова "text/" не пойдёт.
*) все
ссылки сборщик проекта любит делать со слешем впереди - а это отсчёт от корня домена: "/assets/... Заменить на относительные ссылки (правильные) или, если надо, абсолютные локальные типа
file:///
В итоге, должно получиться что-то типа такого, и это будет запускаться локально.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<link rel="stylesheet" href="assets/index-BA6qXr_z.css">
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="assets/index-C1hEJ-6O.js"></script>
</html>
Здесь поправлен путь перед vite.svg и assets, плюс правки атрибутов. И чтобы скрипт Vue стартовал - место запуска перемещается вниз, как в HTML показано (а в текущей сборке он был в хедере). (У Реакт19-проекта ничего менять в бандле и положении запуска не приходится.)
Также, можно без переделок пользоваться IDE типа Webstorm со встроенным локальным сервером, у кого она есть - тогда нужно только поправить ссылки (потому что корень сервера будет не от папки ./dist/, а от корня открытого проекта), а CORS не помешает, т.к. уже сервер. Затем, открыть из любого проекта HTML, справа вверху подсветятся значки браузеров - клик по значку, и страница откроется.
Простой
Простой
