2021.6.16 開催の Vue.js v-tokyo オンライン Meetup#13 - connpass に登壇した際のスライド資料です。
下記のブログ記事にてより詳しい内容を解説しています。 Vite を使ってアプリケーションに環境変数を参照させる方法を考える – PSYENCE:MEDIA
7JUFΛͬͯΞϓϦέʔγϣϯʹڥมΛࢀরͤ͞Δํ๏Λߟ͑ΔMake your App reference ENV_VARIABLES from Vite7VFKTWUPLZPΦϯϥΠϯ.FFUVQ!XBLBNTIB/BPLJ:"."%"
View Slide
!XBLBNTIB*OUSPEVDFNZTFMG/BPLJ:"."%"ࢁాथXFCϑϩϯτΤϯυɾσΟϕϩούʔ6*σβΠφʔגࣜձࣾϦΫϧʔτʢॴଐʣגࣜձࣾϦʔΨϧϑΥʔεʢۀҕୗʣ
<ཁ݅>Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ͍Λม͍͑ͨ
Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ͍Λม͍͑ͨ։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔ
։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔw'JSFCBTFͷΑ͏ͳ4BB4w ։ൃ༻ͱຊ൪༻ͷͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ༻͢Δ"1*,FZ͕มΘΔwࣗલͰ։ൃ͍ͯ͠Δ"1*αʔόw "1*ͷ#BTF63-͕ҟͳΔͣ
ຊ൪༻్Ͱૄ௨αʔό͕ҟͳΔw'JSFCBTFͷΑ͏ͳ4BB4w ͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ༻͢Δ"1*,FZ͕มΘΔwࣗલͰ։ൃ͍ͯ͠Δ"1*αʔόw "1*ͷ#BTF63-͕ҟͳΔͣ͜ΕΒͷϋʔυίʔσΟϯά͠ʹ͍͘ΞϓϦίʔυͷ֎Ͱཧ͍ͨ͠ԿΒ͔ͷํ๏ͰάϩʔόϧఆԽ͠ɺϏϧυ࣌ʹΞϓϦίʔυ͔Βࢀর͍ͤͨ͞
7JUFతʹFOWϑΝΠϧͰཧ͢Δͷ͕ηΦϦʔ
7JUFతʹFOWϑΝΠϧͰཧ͢Δͷ͕ηΦϦʔvite —-mode stg ͱ࣮ߦ͢Δͱ .env ͱ .env.stg ͕ಡΈࠐ·ΕΔ
7JUFతʹFOWϑΝΠϧͰཧ͢Δͷ͕ηΦϦʔvite —-mode stg ͱ࣮ߦ͢Δͱ .env ͱ .env.stg ͕ಡΈࠐ·ΕΔ.envͷ͕૿͑ΔʹͭΕཧ͕େมʹͳΔ😨
ελσΟαϓϦ&/(-*4)ͷ։ൃڥҎ্͋Δ
ελσΟαϓϦ&/(-*4)ͷ։ൃڥҎ্͋Δ͜͏ͳΔͱ͏੩తϑΝΠϧͰཧ͢Δͷʜ😇ίϚϯυϥΠϯҾͰҙͷΛ7JUFʹ͍ͨ͠
ελσΟαϓϦ&/(-*4)ͷ։ൃڥҎ্͋Δ☝͜Εͱಉ͜͡ͱΛΓ͍ͨ
<ղܾࡦ>7JUFͷ+BWB4DSJQU"1*ͱZBSHTΛۦ͢Δ
👍
σϝϦοτ7JUFͷγϯϓϧ͕͞ଛͳΘΕΔwઃఆϑΝΠϧ͕webpack.configͱେࠩͳ͍نʹͳͬͨw ͔ͤͬ͘vite.configͰγϯϓϧΠʔδʔʹॻ͚͍ͯͨͷʹʜw7BOJMMB+4Ͱॻ͘͜ͱʹͳͬͨw vite.configͳΒ5ZQF4DSJQUͰهड़Ͱ͖Δͷʹʜw UTOPEFಋೖ͢Δ͔UTDͰࣄલʹτϥϯεύΠϧ͢Ε5ZQF4DSJQU͍ଓ͚ΒΕΔ͚Ͳɺͦ͜·ͰΔʜʁ
5IBOLZPV😃