[UrimTumim]

Hej Mirki,
mam problem z konfiguracją ścieżek nadrzędnych w #vite i #vuejs ale zasadniczo myślę, że z #react jest tak samo.
Mam dosyć starą apkę, której struktura wygląda w uproszczeniu tak:
A/
B/
C/
D/
...
Z/
całość stoi na IIS na archaicznym asp classic (ale to w sumie też bez znaczenia) mam do tego dostęp po localhost:765
w folderze A mam wspólne cssy,grafiki, etc statyczne pliki (np. localhost:765/A/style.css)
w folderze B mam wyprowadzone endpointy API (np. localhost:765/A/cokolwiek)
w folderze C,D,E itd chciałbym mieć SPA w vue, która zaciąga cssy (z folderu A) i komunikuje się z API (z folderu B)

kiedy odpalam npm run dev vite stawia serwer na localhost:5173
żeby komunikowala się z resztą definiuję proxy i ogólnie wszystko działa
np.
proxy: {
"/api": {
target: "http://localhost:765/B/cokolwiek",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, ""),
},
"/main": {
target: "http://localhost:765/",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/main/, ""),
},
},
Ale jak skonfigurować to tak aby w przypadku builda dla produkcji też działało? Można zrobić osobny config, w zależności od komendy, ale nie bardzo wiem jak zrobić, żeby ostatecznie np. zamieniało "/api" na "../B". Bo z tego co wiem przy buildzie rollup nie bierze pod uwagę ustawień proxy, więc trzeba to gdzieś indziej skonfigurować ;x

I co ważne chciałbym zawsze by ścieżki były względne (tzn. ../cokolwiek, a nie localhost:765/cokolwiek)

#frontend #javascript

[IcyHot]

@UrimTumim wrzuć to na GitHub i daj link, zobaczę

[terror_blade]

@UrimTumim: Użyj zmiennych środowiskowych .env.development i .env.production, zdefiniuj target np.:

VUE_APP_API_TARGET=http://localhost:765/ i VUE_APP_API_TARGET=/

https://github.com/vitejs/vite/discussions/2260#discussioncomment-408439

[UrimTumim]

@IcyHot: postaram się jutro rano przygotować jakiś proof of concept tego co mam, z pełnym plikiem konfiguracji dla vite (dzisiaj jestem offline cały dzień). Wielkie dzięki za zainteresowanie tematem;)

@terror_blade: kombinowałem już wcześniej ze zmiennymi środowiskowymi, ale zasadniczo nic to nie zmienia;( bo czy to podam jako zmienne czy zadeklaruje na sztywno to w zasadzie nie ma znaczenia, bo mogę się zapinać na to czy to jest dev czy build(chociaż

[UrimTumim]

@IcyHot: @terror_blade: próbowałem sam jeszcze z tym powalczyć, ale już wymiękam.

Udało mi się skonfigurować to tak, by w trybie build wszystko składało się jak należy (ścieżki zamieniają się na względne), ale nie potrafię się przebić przez wersję dev.

O ile w samym pliku startowym index.html proxy działa (albo raczej wcześniej działało, bo zostało to zamienione na plugina do roolupa który zmienia ścieżki), to w przypadku plików składanych - już

[terror_blade]

@UrimTumim: Jak chcesz mieć różne ścieżki w pliku index.html to spróbuj tak:
1 dodaj pliki .env.development i .env.production ze ścieżkami
2 W projekcie zainstaluj vite-plugin-html
3 W vite.config zdefiniuj zmienne
4 W pliku index.html dodaj te zmienne np. href="<%= favicon %>/favicon.ico"

Wrzuciłem przykład na repo
https://github.com/skav3n/vite-urim-tumim

[UrimTumim]

@terror_blade: dzięki za zaintersowanie tematem i za przykład w repo :)
Przeanalizowałem go sobie - w zasadzie to w moim używałem tej samej wtyczki i ogólnie to wszystko działało tak jak u mnie (jedyna różnica, że Ty opierałeś się na zmiennych env, a ja na trybie w którym odpalany był vite i na sztywnej deklaracji tych ścieżek).
Zmiana ścieżek w pliku index.html, tak jak pisałem wcześniej - działała, problemem były pliki