Vue.js ścieżki w index.html po buildzie

pytanie zadane 17 grudnia 2018 w JavaScript przez wachcio Nowicjusz (120 p.)

Witam

Uczę się Vue.js i stworzyłem sobie pierwszy projekt. Po zrobieniu build-a linki w index.html do CSS i skryptów JS nie działały. Poszukałem w dokumentacji i okazało się, że trzeba stworzyć plik vue.config.js i zamieścić np coś takiego:

module.exports = {
   baseUrl: process.env.NODE_ENV === "production" ? "/vue/" : "/"
};

Wtedy Vue dodało wpisany katalog przed ścieżką. Ja chciałbym jednak mieć ścieżki względne więc wpis zamieniłem na:

module.exports = {
   baseUrl: process.env.NODE_ENV === "production" ? "./" : "/"
};

niestety bez spodziewanego rezultatu. Co robię źle?

komentarz 17 grudnia 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Uruchamiasz strone bezpośrednio czy przez serwer ?

komentarz 17 grudnia 2018 przez wachcio Nowicjusz (120 p.)

Build-a chcę wrzucić na serwer wykupiony na home.pl Myślałem, że można ustawić Vue tak aby wstawiał ścieżki względne. Wtedy bez edycji wynikowego pliki Index.html przynosić aplikację do innego folderu

2 odpowiedzi

odpowiedź 17 grudnia 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Aplikacja Vue działą tylko na serwerze:

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

komentarz 17 grudnia 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Socialler to aplikacja napisana w Vuetify https://socialler.pl/login (moja).

Stwórz sobie .htacces:

<IfModule mod_rewrite.c>
  <IfModule mod_negotiation.c>
  Options -MultiViews -Indexes
  </IfModule>

  RewriteEngine On

  # Handle Authorization Header
  RewriteCond %{HTTP:Authorization} .
  RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

  # Redirect Trailing Slashes If Not A Folder...
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} (.+)/$
  RewriteRule ^ %1 [L,R=301]

  # Handle Front Controller...
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [L]
</IfModule>
Z pomocą czego będzie działać:

/login jeśli masz włączone history:mode w routerze.

1	komentarz 22 grudnia 2018 przez wachcio Nowicjusz (120 p.) Jest wersja demo tej apki lub za pomocą jakiego maila i hasła można się zalogować aby zobaczyć ją w akcji? PS "Niepoprawne" pisze się łącznie

komentarz 23 grudnia 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Aplikacje możesz pobrać z pod adresu:

htttps://socialler.pl/socialler.apk

a aby utworzyć swoja klasę w celu testów zarejestruj się pod adresem:

https://socialler.pl/register

Klucz szkoły (ZSP4) to:

O8lXUSqMjjvxIIAKVmOha0kM51Pgbw

komentarz 23 grudnia 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

A loginy testowe to:

Email: demo@socialler.pl

Hasło:demoacc

kontakt z administracją można uzyskać pod adresem prezes@socialler.pl

komentarz 27 grudnia 2018 przez wachcio Nowicjusz (120 p.)

@Igor Gawrys, aplikacja wygląda na prawdę profesjonalnie choć nie usterzegłeś się literówek.

Moja dopiero raczkuje i znajduje się pod adresem http://wachcio.pl/meteo_vue

Cały czas ją zmieniam więc może nie działać pod tym adresem za jakiś czas... Przedstawia ona dane aktualne (aktualizowane co minutę) i archiwalne z mojej stacji meteo jak również kilku urządzeń które znajdują się u mnie w domu i nie tylko. Stację sam zaprojektowałem, polutowałem, zaprogramowałem mikrokontroler AVR w C, logikę na serwerze w PHP i MySQL a aplikacja udostępnia te dane w "zjadliwej" formie