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)
@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
@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
@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
@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 dołączane (takie jak np. plik C/src/store/filter.ts, gdzie ścieżki nie ulegały zamianie).Chyba że jednak zamiana w plikach dołączanych powinna wyglądać inaczej?
Ale! Dzięki Tobie zmusiłem się by jeszcze raz przeanalizować wszystko i odkryłem, że z nieznanych mi przyczyn proxy w vite bierze pod uwagę tylko zamianki, gdzie na początku zamienianego stringa jest "/", a znowu replace od rollupa ignorował mi string który zaczynał się od "/" :D Dlatego działało albo jedno albo drugie - jak dodawałem jakieś _A do zamianki w proxy, to nie działało mi w devie, ale rollup mi to interpretował przy buildzie, a gdy zamieniałem na /A_ to nagle proxy zaczęło działać, ale rollup
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
VUE_APP_API_TARGET=http://localhost:765/ i VUE_APP_API_TARGET=/
https://github.com/vitejs/vite/discussions/2260#discussioncomment-408439
@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
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
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
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 dołączane (takie jak np. plik C/src/store/filter.ts, gdzie ścieżki nie ulegały zamianie).Chyba że jednak zamiana w plikach dołączanych powinna wyglądać inaczej?
Ale!
Dzięki Tobie zmusiłem się by jeszcze raz przeanalizować wszystko i odkryłem, że z nieznanych mi przyczyn proxy w vite bierze pod uwagę tylko zamianki, gdzie na początku zamienianego stringa jest "/", a znowu replace od rollupa ignorował mi string który zaczynał się od "/" :D Dlatego działało albo jedno albo drugie - jak dodawałem jakieś _A do zamianki w proxy, to nie działało mi w devie, ale rollup mi to interpretował przy buildzie, a gdy zamieniałem na /A_ to nagle proxy zaczęło działać, ale rollup