[{"data":1,"prerenderedAt":1069},["ShallowReactive",2],{"blog-post:vite-env-index-html":3},{"id":4,"title":5,"body":6,"date":1058,"description":1059,"draft":1060,"extension":1061,"lastModified":1062,"meta":1063,"navigation":348,"path":1064,"readingTime":1065,"seo":1066,"stem":1067,"__hash__":1068},"posts\u002Fblog\u002Fvite-env-index-html.md","Inject Environment Variables into index.html file in Vite",{"type":7,"value":8,"toc":1052},"minimark",[9,38,56,59,64,90,94,161,166,197,216,230,234,284,299,304,490,494,548,554,644,647,657,684,688,710,840,866,870,884,905,909,975,979,1011,1015,1034,1037,1048],[10,11,12,13,17,18,21,22,29,30,33,34,37],"p",{},"While we can easily import and use ",[14,15,16],"code",{},".env"," values in our JS\u002FTS files, Vue\n",[14,19,20],{},"\u003Cscript>"," etc. in ",[23,24,28],"a",{"href":25,"rel":26},"https:\u002F\u002Fvitejs.dev\u002F",[27],"nofollow","Vite",", there isn't exactly a\nstraightforward way to inject these values in our ",[14,31,32],{},"index.html"," file since we\ncannot directly access ",[14,35,36],{},"import.meta.env"," in that file.",[10,39,40,41,43,44,47,48,51,52,55],{},"Let's say we have an ",[14,42,16],{}," file from which we need to access a specific\nvariable value and use it in a ",[14,45,46],{},"\u003Cmeta>"," property or maybe a ",[14,49,50],{},"script"," tag where\nthe api key needs to be appended to ",[14,53,54],{},"src"," url.",[10,57,58],{},"For Example,",[10,60,61,63],{},[14,62,16],{}," file:",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-dotenv shiki shiki-themes github-dark","VITE_API_KEY=foo\n","dotenv","",[14,72,73],{"__ignoreMap":70},[74,75,78,82,86],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"s9osk","VITE_API_KEY",[74,83,85],{"class":84},"snl16","=",[74,87,89],{"class":88},"s95oV","foo\n",[10,91,92,63],{},[14,93,32],{},[65,95,99],{"className":96,"code":97,"language":98,"meta":70,"style":70},"language-html shiki shiki-themes github-dark","\u003Cmeta name=\"SOME_THIRD_PARTY\" content=\"foo\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fawesomethirdparty.library\u002Fv1\u002Fscript.js?VITE_API_KEY=foo\">\u003C\u002Fscript>\n\u003C!-- or a \u003Cdiv data-xyz-api-key=\"foo\"> somewhere in the html file -->\n","html",[14,100,101,131,154],{"__ignoreMap":70},[74,102,103,106,110,114,116,120,123,125,128],{"class":76,"line":77},[74,104,105],{"class":88},"\u003C",[74,107,109],{"class":108},"s4JwU","meta",[74,111,113],{"class":112},"svObZ"," name",[74,115,85],{"class":88},[74,117,119],{"class":118},"sU2Wk","\"SOME_THIRD_PARTY\"",[74,121,122],{"class":112}," content",[74,124,85],{"class":88},[74,126,127],{"class":118},"\"foo\"",[74,129,130],{"class":88}," \u002F>\n",[74,132,134,136,138,141,143,146,149,151],{"class":76,"line":133},2,[74,135,105],{"class":88},[74,137,50],{"class":108},[74,139,140],{"class":112}," src",[74,142,85],{"class":88},[74,144,145],{"class":118},"\"https:\u002F\u002Fawesomethirdparty.library\u002Fv1\u002Fscript.js?VITE_API_KEY=foo\"",[74,147,148],{"class":88},">\u003C\u002F",[74,150,50],{"class":108},[74,152,153],{"class":88},">\n",[74,155,157],{"class":76,"line":156},3,[74,158,160],{"class":159},"sAwPA","\u003C!-- or a \u003Cdiv data-xyz-api-key=\"foo\"> somewhere in the html file -->\n",[162,163,165],"h2",{"id":164},"method-1-using-vite-plugin-api","Method 1: Using Vite Plugin API",[10,167,168,169,174,175,182,183,185,186,193,194,196],{},"Vite.js comes with a highly configurable\n",[23,170,173],{"href":171,"rel":172},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fapi-plugin.html",[27],"plugin API system",". Let's create a\ncustom vite plugin that utilises\n",[23,176,179],{"href":177,"rel":178},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fapi-plugin.html#transformindexhtml",[27],[14,180,181],{},"transformIndexHtml","\nhook which gives us access to contents of ",[14,184,32],{}," file as string. We'll\nalso use ",[23,187,190],{"href":188,"rel":189},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fapi-javascript.html#loadenv",[27],[14,191,192],{},"loadEnv","\nfunction from vite to load the required ",[14,195,16],{}," file and access its values in our\ncustom plugin.",[10,198,199],{},[200,201,202,203,206,207,209,210,215],"strong",{},"Also note the prefix ",[14,204,205],{},"VITE_"," to our environment variables, by default vite\nwill only return the environment variables prefixed with ",[14,208,205],{}," you can\ncustomise that (not recommended) using\n",[23,211,214],{"href":212,"rel":213},"https:\u002F\u002Fvitejs.dev\u002Fconfig\u002Fshared-options.html#envprefix",[27],"envPrefix"," config.",[10,217,218,219,221,222,229],{},"In the ",[14,220,32],{}," file let's add a placeholder text that is unique across our\nhtml file and can be replaced easily with\n",[23,223,226],{"href":224,"rel":225},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString\u002Freplace",[27],[14,227,228],{},"String.prototype.replace()","\nin our custom vite plugin.",[10,231,232,63],{},[14,233,32],{},[65,235,237],{"className":96,"code":236,"language":98,"meta":70,"style":70},"\u003Cmeta name=\"SOME_THIRD_PARTY\" content=\"$API_KEY_PLACEHOLDER\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fawesomethirdparty.library\u002Fv1\u002Fscript.js?API_KEY=$API_KEY_PLACEHOLDER\">\u003C\u002Fscript>\n\u003C!-- or a \u003Cdiv data-xyz-api-key=\"$API_KEY_PLACEHOLDER\"> somewhere in the html file -->\n",[14,238,239,260,279],{"__ignoreMap":70},[74,240,241,243,245,247,249,251,253,255,258],{"class":76,"line":77},[74,242,105],{"class":88},[74,244,109],{"class":108},[74,246,113],{"class":112},[74,248,85],{"class":88},[74,250,119],{"class":118},[74,252,122],{"class":112},[74,254,85],{"class":88},[74,256,257],{"class":118},"\"$API_KEY_PLACEHOLDER\"",[74,259,130],{"class":88},[74,261,262,264,266,268,270,273,275,277],{"class":76,"line":133},[74,263,105],{"class":88},[74,265,50],{"class":108},[74,267,140],{"class":112},[74,269,85],{"class":88},[74,271,272],{"class":118},"\"https:\u002F\u002Fawesomethirdparty.library\u002Fv1\u002Fscript.js?API_KEY=$API_KEY_PLACEHOLDER\"",[74,274,148],{"class":88},[74,276,50],{"class":108},[74,278,153],{"class":88},[74,280,281],{"class":76,"line":156},[74,282,283],{"class":159},"\u003C!-- or a \u003Cdiv data-xyz-api-key=\"$API_KEY_PLACEHOLDER\"> somewhere in the html file -->\n",[10,285,286,287,290,291,294,295,298],{},"Let's create an ",[14,288,289],{},"injectHtml.ts"," file in the root of the project directory. (you\nalso might need to add this files into ",[14,292,293],{},"include"," array in your\n",[14,296,297],{},"tsconfig.node.json"," file if you're using Typescript)",[10,300,301,303],{},[14,302,289],{},":",[65,305,309],{"className":306,"code":307,"language":308,"meta":70,"style":70},"language-ts shiki shiki-themes github-dark","import type { PluginOption } from \"vite\";\nimport { loadEnv } from \"vite\";\n\nexport const injectEnvIntoHtmlPlugin = (): PluginOption => {\n  const env = loadEnv(\"production\", \".\");\n  return {\n    name: \"inject-env-html\",\n    transformIndexHtml(html: string) {\n      return html.replace(\"$API_KEY_PLACEHOLDER\", env[\"VITE_API_KEY\"]);\n    },\n  };\n};\n","ts",[14,310,311,331,344,350,379,409,417,429,447,472,478,484],{"__ignoreMap":70},[74,312,313,316,319,322,325,328],{"class":76,"line":77},[74,314,315],{"class":84},"import",[74,317,318],{"class":84}," type",[74,320,321],{"class":88}," { PluginOption } ",[74,323,324],{"class":84},"from",[74,326,327],{"class":118}," \"vite\"",[74,329,330],{"class":88},";\n",[74,332,333,335,338,340,342],{"class":76,"line":133},[74,334,315],{"class":84},[74,336,337],{"class":88}," { loadEnv } ",[74,339,324],{"class":84},[74,341,327],{"class":118},[74,343,330],{"class":88},[74,345,346],{"class":76,"line":156},[74,347,349],{"emptyLinePlaceholder":348},true,"\n",[74,351,353,356,359,362,365,368,370,373,376],{"class":76,"line":352},4,[74,354,355],{"class":84},"export",[74,357,358],{"class":84}," const",[74,360,361],{"class":112}," injectEnvIntoHtmlPlugin",[74,363,364],{"class":84}," =",[74,366,367],{"class":88}," ()",[74,369,303],{"class":84},[74,371,372],{"class":112}," PluginOption",[74,374,375],{"class":84}," =>",[74,377,378],{"class":88}," {\n",[74,380,382,385,389,391,394,397,400,403,406],{"class":76,"line":381},5,[74,383,384],{"class":84},"  const",[74,386,388],{"class":387},"sDLfK"," env",[74,390,364],{"class":84},[74,392,393],{"class":112}," loadEnv",[74,395,396],{"class":88},"(",[74,398,399],{"class":118},"\"production\"",[74,401,402],{"class":88},", ",[74,404,405],{"class":118},"\".\"",[74,407,408],{"class":88},");\n",[74,410,412,415],{"class":76,"line":411},6,[74,413,414],{"class":84},"  return",[74,416,378],{"class":88},[74,418,420,423,426],{"class":76,"line":419},7,[74,421,422],{"class":88},"    name: ",[74,424,425],{"class":118},"\"inject-env-html\"",[74,427,428],{"class":88},",\n",[74,430,432,435,437,439,441,444],{"class":76,"line":431},8,[74,433,434],{"class":112},"    transformIndexHtml",[74,436,396],{"class":88},[74,438,98],{"class":80},[74,440,303],{"class":84},[74,442,443],{"class":387}," string",[74,445,446],{"class":88},") {\n",[74,448,450,453,456,459,461,463,466,469],{"class":76,"line":449},9,[74,451,452],{"class":84},"      return",[74,454,455],{"class":88}," html.",[74,457,458],{"class":112},"replace",[74,460,396],{"class":88},[74,462,257],{"class":118},[74,464,465],{"class":88},", env[",[74,467,468],{"class":118},"\"VITE_API_KEY\"",[74,470,471],{"class":88},"]);\n",[74,473,475],{"class":76,"line":474},10,[74,476,477],{"class":88},"    },\n",[74,479,481],{"class":76,"line":480},11,[74,482,483],{"class":88},"  };\n",[74,485,487],{"class":76,"line":486},12,[74,488,489],{"class":88},"};\n",[10,491,492,63],{},[14,493,297],{},[65,495,499],{"className":496,"code":497,"language":498,"meta":70,"style":70},"language-json shiki shiki-themes github-dark","{\n  \"compilerOptions\": {\n    \u002F\u002F...\n  },\n  \"include\": [\"vite.config.ts\", \"injectHtml.ts\"]\n}\n","json",[14,500,501,506,514,519,524,543],{"__ignoreMap":70},[74,502,503],{"class":76,"line":77},[74,504,505],{"class":88},"{\n",[74,507,508,511],{"class":76,"line":133},[74,509,510],{"class":387},"  \"compilerOptions\"",[74,512,513],{"class":88},": {\n",[74,515,516],{"class":76,"line":156},[74,517,518],{"class":159},"    \u002F\u002F...\n",[74,520,521],{"class":76,"line":352},[74,522,523],{"class":88},"  },\n",[74,525,526,529,532,535,537,540],{"class":76,"line":381},[74,527,528],{"class":387},"  \"include\"",[74,530,531],{"class":88},": [",[74,533,534],{"class":118},"\"vite.config.ts\"",[74,536,402],{"class":88},[74,538,539],{"class":118},"\"injectHtml.ts\"",[74,541,542],{"class":88},"]\n",[74,544,545],{"class":76,"line":411},[74,546,547],{"class":88},"}\n",[10,549,550,551],{},"Add the plugin to ",[14,552,553],{},"vite.config.ts",[65,555,557],{"className":306,"code":556,"language":308,"meta":70,"style":70},"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs\u002Fplugin-vue\";\nimport { injectEnvIntoHtmlPlugin } from \".\u002FinjectHtml\";\n\n\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\nexport default defineConfig({\n  plugins: [vue(), injectEnvIntoHtmlPlugin()],\n});\n",[14,558,559,572,586,600,604,609,622,639],{"__ignoreMap":70},[74,560,561,563,566,568,570],{"class":76,"line":77},[74,562,315],{"class":84},[74,564,565],{"class":88}," { defineConfig } ",[74,567,324],{"class":84},[74,569,327],{"class":118},[74,571,330],{"class":88},[74,573,574,576,579,581,584],{"class":76,"line":133},[74,575,315],{"class":84},[74,577,578],{"class":88}," vue ",[74,580,324],{"class":84},[74,582,583],{"class":118}," \"@vitejs\u002Fplugin-vue\"",[74,585,330],{"class":88},[74,587,588,590,593,595,598],{"class":76,"line":156},[74,589,315],{"class":84},[74,591,592],{"class":88}," { injectEnvIntoHtmlPlugin } ",[74,594,324],{"class":84},[74,596,597],{"class":118}," \".\u002FinjectHtml\"",[74,599,330],{"class":88},[74,601,602],{"class":76,"line":352},[74,603,349],{"emptyLinePlaceholder":348},[74,605,606],{"class":76,"line":381},[74,607,608],{"class":159},"\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\n",[74,610,611,613,616,619],{"class":76,"line":411},[74,612,355],{"class":84},[74,614,615],{"class":84}," default",[74,617,618],{"class":112}," defineConfig",[74,620,621],{"class":88},"({\n",[74,623,624,627,630,633,636],{"class":76,"line":419},[74,625,626],{"class":88},"  plugins: [",[74,628,629],{"class":112},"vue",[74,631,632],{"class":88},"(), ",[74,634,635],{"class":112},"injectEnvIntoHtmlPlugin",[74,637,638],{"class":88},"()],\n",[74,640,641],{"class":76,"line":431},[74,642,643],{"class":88},"});\n",[10,645,646],{},"If we run the vite server and check index.html file in the browser:",[10,648,649],{},[650,651],"img",{"alt":652,"dataZoomable":70,"height":653,"loading":654,"src":655,"width":656},"Environment Variable loaded into meta tag",96,"lazy","\u002Fcontent\u002Fmeta_loaded.png",772,[10,658,659,660,665,666,668,669,675,676,679,680,683],{},"Note: ",[23,661,663],{"href":188,"rel":662},[27],[14,664,192],{}," only\nreturns env values prefixed with ",[14,667,205],{}," and also since we are using\n",[23,670,673],{"href":671,"rel":672},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fenv-and-mode.html#env-files",[27],[14,674,16],{}," as the name for\nour environment variable file it's loaded into both ",[14,677,678],{},"production"," and\n",[14,681,682],{},"development"," modes vite is running in and you might want to change based on\nyour requirement.",[162,685,687],{"id":686},"method-2-teleportportal-into-indexhtml","Method 2: Teleport\u002FPortal into index.html",[10,689,690,691,696,697,702,703,706,707,709],{},"We can utilise frameworks\n",[23,692,695],{"href":693,"rel":694},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Fteleport.html",[27],"Teleport","\n(",[23,698,701],{"href":699,"rel":700},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fportals.html",[27],"Portal"," in react) to easily insert html\ncontent anywhere in the index.html with a ",[14,704,705],{},"selector",". First we load the required\nenv value into our ",[14,708,50],{}," and then use teleport to inject it into the html.",[65,711,714],{"className":712,"code":713,"language":629,"meta":70,"style":70},"language-vue shiki shiki-themes github-dark","\u003Cscript setup lang=\"ts\">\nconst apiKey = import.meta.env.VITE_API_KEY;\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003CTeleport to=\"head\">\n    \u003Cmeta name=\"SOME_THIRD_PARTY\" :content=\"apiKey\" \u002F>\n  \u003C\u002FTeleport>\n  \u003C!-- you could also document.getElementById and appendChild instead of Teleport at this point -->\n\u003C\u002Ftemplate>\n",[14,715,716,735,760,769,778,795,818,827,832],{"__ignoreMap":70},[74,717,718,720,722,725,728,730,733],{"class":76,"line":77},[74,719,105],{"class":88},[74,721,50],{"class":108},[74,723,724],{"class":112}," setup",[74,726,727],{"class":112}," lang",[74,729,85],{"class":88},[74,731,732],{"class":118},"\"ts\"",[74,734,153],{"class":88},[74,736,737,740,743,745,748,751,753,756,758],{"class":76,"line":133},[74,738,739],{"class":84},"const",[74,741,742],{"class":387}," apiKey",[74,744,364],{"class":84},[74,746,747],{"class":84}," import",[74,749,750],{"class":88},".",[74,752,109],{"class":387},[74,754,755],{"class":88},".env.",[74,757,81],{"class":387},[74,759,330],{"class":88},[74,761,762,765,767],{"class":76,"line":156},[74,763,764],{"class":88},"\u003C\u002F",[74,766,50],{"class":108},[74,768,153],{"class":88},[74,770,771,773,776],{"class":76,"line":352},[74,772,105],{"class":88},[74,774,775],{"class":108},"template",[74,777,153],{"class":88},[74,779,780,783,785,788,790,793],{"class":76,"line":381},[74,781,782],{"class":88},"  \u003C",[74,784,695],{"class":108},[74,786,787],{"class":112}," to",[74,789,85],{"class":88},[74,791,792],{"class":118},"\"head\"",[74,794,153],{"class":88},[74,796,797,800,802,804,806,808,811,813,816],{"class":76,"line":411},[74,798,799],{"class":88},"    \u003C",[74,801,109],{"class":108},[74,803,113],{"class":112},[74,805,85],{"class":88},[74,807,119],{"class":118},[74,809,810],{"class":112}," :content",[74,812,85],{"class":88},[74,814,815],{"class":118},"\"apiKey\"",[74,817,130],{"class":88},[74,819,820,823,825],{"class":76,"line":419},[74,821,822],{"class":88},"  \u003C\u002F",[74,824,695],{"class":108},[74,826,153],{"class":88},[74,828,829],{"class":76,"line":431},[74,830,831],{"class":159},"  \u003C!-- you could also document.getElementById and appendChild instead of Teleport at this point -->\n",[74,833,834,836,838],{"class":76,"line":449},[74,835,764],{"class":88},[74,837,775],{"class":108},[74,839,153],{"class":88},[10,841,842,843,847,848,850,851,854,855,858,859,862,863,865],{},"Drawbacks of this approach is your api key won't be available on ",[844,845,846],"em",{},"initial page\nload"," (i.e here the ",[14,849,109],{}," tag with ",[14,852,853],{},"apiKey"," would be loaded into html only\nafter vue is loaded and initialised). Also at this point instead of Teleport you\ncould also just ",[14,856,857],{},"document.getElementById"," or ",[14,860,861],{},"document.querySelector"," in your\nframework and inject the ",[14,864,853],{}," too.",[162,867,869],{"id":868},"method-3-vite-plugin-html-env","Method 3: vite-plugin-html-env",[10,871,872,873,878,879,883],{},"Using ",[23,874,877],{"href":875,"rel":876},"https:\u002F\u002Fgithub.com\u002Flxs24sxl\u002Fvite-plugin-html-env",[27],"vite-plugin-html-env",",\nthis works similar to ",[23,880,882],{"href":881},"#method-1-using-vite-plugin-api","Method 1",". Just install\nthe plugin and add a comment in index.html file that includes .env KEY.",[65,885,889],{"className":886,"code":887,"language":888,"meta":70,"style":70},"language-sh shiki shiki-themes github-dark","yarn add -D vite-plugin-html-env\n","sh",[14,890,891],{"__ignoreMap":70},[74,892,893,896,899,902],{"class":76,"line":77},[74,894,895],{"class":112},"yarn",[74,897,898],{"class":118}," add",[74,900,901],{"class":387}," -D",[74,903,904],{"class":118}," vite-plugin-html-env\n",[10,906,907,303],{},[14,908,553],{},[65,910,912],{"className":306,"code":911,"language":308,"meta":70,"style":70},"import VitePluginHtmlEnv from \"vite-plugin-html-env\";\nimport vue from \"@vitejs\u002Fplugin-vue\";\n\n\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\nexport default defineConfig({\n  plugins: [VitePluginHtmlEnv(), vue()],\n});\n",[14,913,914,928,940,944,948,958,971],{"__ignoreMap":70},[74,915,916,918,921,923,926],{"class":76,"line":77},[74,917,315],{"class":84},[74,919,920],{"class":88}," VitePluginHtmlEnv ",[74,922,324],{"class":84},[74,924,925],{"class":118}," \"vite-plugin-html-env\"",[74,927,330],{"class":88},[74,929,930,932,934,936,938],{"class":76,"line":133},[74,931,315],{"class":84},[74,933,578],{"class":88},[74,935,324],{"class":84},[74,937,583],{"class":118},[74,939,330],{"class":88},[74,941,942],{"class":76,"line":156},[74,943,349],{"emptyLinePlaceholder":348},[74,945,946],{"class":76,"line":352},[74,947,608],{"class":159},[74,949,950,952,954,956],{"class":76,"line":381},[74,951,355],{"class":84},[74,953,615],{"class":84},[74,955,618],{"class":112},[74,957,621],{"class":88},[74,959,960,962,965,967,969],{"class":76,"line":411},[74,961,626],{"class":88},[74,963,964],{"class":112},"VitePluginHtmlEnv",[74,966,632],{"class":88},[74,968,629],{"class":112},[74,970,638],{"class":88},[74,972,973],{"class":76,"line":419},[74,974,643],{"class":88},[10,976,977,303],{},[14,978,32],{},[65,980,982],{"className":96,"code":981,"language":98,"meta":70,"style":70},"\u003Cmeta name=\"SOME_THIRD_PARTY\" content=\"\u003C{ VITE_API_KEY }>\" \u002F>\n",[14,983,984],{"__ignoreMap":70},[74,985,986,988,990,992,994,996,998,1000,1003,1006,1009],{"class":76,"line":77},[74,987,105],{"class":88},[74,989,109],{"class":108},[74,991,113],{"class":112},[74,993,85],{"class":88},[74,995,119],{"class":118},[74,997,122],{"class":112},[74,999,85],{"class":88},[74,1001,1002],{"class":118},"\"",[74,1004,105],{"class":1005},"s6RL2",[74,1007,1008],{"class":118},"{ VITE_API_KEY }>\"",[74,1010,130],{"class":88},[162,1012,1014],{"id":1013},"update-vite-42-and-above","Update Vite 4.2 and above",[10,1016,1017,1018,1023,1024,1029,1030,1033],{},"Since\n",[23,1019,1022],{"href":1020,"rel":1021},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Fblob\u002Fmain\u002Fpackages\u002Fvite\u002FCHANGELOG.md#support-env-variables-replacement-in-html-files",[27],"Vite 4.2",",\nthis feature is supported\n",[23,1025,1028],{"href":1026,"rel":1027},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fenv-and-mode.html#html-env-replacement",[27],"natively"," and\nwe can use ",[14,1031,1032],{},"%VITE_API_KEY%"," syntax in our HTML.",[10,1035,1036],{},"Further Reading \u002F References:",[1038,1039,1040],"ul",{},[1041,1042,1043],"li",{},[23,1044,1047],{"href":1045,"rel":1046},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fenv-and-mode.html#env-variables-and-modes",[27],"Vite .env modes",[1049,1050,1051],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}",{"title":70,"searchDepth":133,"depth":133,"links":1053},[1054,1055,1056,1057],{"id":164,"depth":133,"text":165},{"id":686,"depth":133,"text":687},{"id":868,"depth":133,"text":869},{"id":1013,"depth":133,"text":1014},"2022-10-17","Inject environment variables into index.html in Vite. Compare the built-in %VITE_% replacement, a transformIndexHtml plugin, and an HTML template plugin at build time.",false,"md","2026-08-29T17:42:32+07:00",{},"\u002Fblog\u002Fvite-env-index-html","4 min read",{"title":5,"description":1059},"blog\u002Fvite-env-index-html","HBTigwwD__kiSy-JT0-p1iIqtbvGRaJXMHRQWopC8vM",1788101292693]