Npm run build [вижу пустую страницу когда открываю build проекта в браузере]


#1

Есть здесь специалисты по node.js?
Начал изучать vue, установил vue-router, на локальном сервере работает все норм.

Собираю проект и index.html выдает мне пустую страницу

Заметил, что если во vue-router убрать модуль ‘history’, то проблем с отображением нет.

Крч, залил на github, если просмотрите и найдете ошибку, буду признателен, уважаемые коллеги)


#2

Давай сразу на “ты”. Скорее всего дело в том что ты открыаешь html файл как файл вот так:

. Некоторые API браузера не работают когда html страница открывается как файл. И среди них - history API. Если открыть эту страницу так чтобы она была доставлена в браузер по http, то все заработает. Я для таких задач использую использую serve. Поставь глобально npm i serve -g, потом сделай билд, и из папки проекта запусти serve .. После запуска утилита покажет в консоли какой адрес открыть, по этому адресу загрузится по умолчанию index.html, и все заработает как при девелопменте.


#3

"Я для таких задач использую использую serve . Поставь глобально npm i serve -g , потом сделай билд, и из папки проекта запусти serve"

ОК, все круто) А как теперь сделать так, чтобы проект запустился на хостинге?


#4

Если проекту не нужен бекенд и он самодостаточен, то нужно выгрузить файлы сборки и сам html, убедиться что html подгружается в браузер и что подгружаются скрипты и стили (если есть).


#5

Все подгружается, vue активируется, инициализируется, но вместо представления, которое стабильно работает на development, увы ничего нету. Просто показывает пустое приложение -


#6

Что в браузерной консоли показывает?


#7

http://qshki.pe.hu/sibtiger-study/


#8

Положи файлы так чтобы он открывался из корня сайта. Если заработает, то нужно будет читать как для vue-router сделать корнем подпуть (я про эту часть урла /sibtiger-study/).


#9

Попробуй при инициализации VueRouter указать:

base: '/sibtiger-study/'

#10

Все работает, спасибо!
И последнее, не подскажете, как теперь src для img настроить, чтобы в гугле не копаться?)


#11

Можно использовать абсолютные пути картинок от корня сайта типа /img/myimage.jpg. Я бы выбрал этот путь.

Можно положит папку с картинками в каталог sibtiger-study/img и использовать относительные пути. img/myimage.jpg.


#12

СПАСИБО! Добавлю вас в закладки ребят, буду консультироваться, если вы не против)


#13

На это сообщение поступили жалобы от участников сообщества, поэтому оно временно скрыто.