https://gaute.dev/assets/dev-blog_environment-variables-vue.md.94ebfd4c.js

1import{_ as o,c as t,b as i,e as n,a as e,q as l,s as c,o as r}from"./chunks/framework.24cd38f4.js";const p="/images/dev-blog/environment-variables-vue/environment-variables-vue-vite.png",d="/images/dev-blog/environment-variables-vue/environment-variables-vue-cli.png",_=JSON.parse('{"title":"Environment Variables in Vue","description":"How to set environment variables in your Vue app.","frontmatter":{"title":"Environment Variables in Vue","date":"2020-03-25T00:00:00.000Z","updated":"2023-01-01T00:00:00.000Z","coverImgExtension":"png","tags":["Vue"],"description":"How to set environment variables in your Vue app."},"headers":[],"relativePath":"dev-blog/environment-variables-vue.md"}'),u={name:"dev-blog/environment-variables-vue.md"};function v(b,s,y,m,g,h){const a=c("ToggleView");return r(),t("div",null,[i(a,{options:["Vite","Vue CLI"]},{0:n(()=>[...s[0]||(s[0]=[e("p",null,[l("Sometimes you want your app to behave differently in local development and production. Maybe they should point to a different backend or use different API keys. Vite has very good documentation about it, "),e("a",{href:"https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes",target:"_blank",rel:"noreferrer"},"Env Variables and Modes"),l(". But I will try to keep it shorter, for the use I often need.")],-1),e("p",null,[l("You can create different "),e("code",null,".env"),l(" files at the root of your project.")],-1),e("p",null,[e("img",{src:p,alt:"project structure"})],-1),e("p",null,"Alternatives:",-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env                    # loaded in all cases")]),l(`
2`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.local              # loaded in all cases, ignored by git")]),l(`
3`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.development        # vite")]),l(`
4`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.development.local  # vite, ignored by git")]),l(`
5`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.test               # vite --mode test or vite build --mode test")]),l(`
6`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.test.local         # vite --mode test or vite build --mode test, ignored by git")]),l(`
7`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.production         # vite build")]),l(`
8`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.production.local   # vite build, ignored by git")]),l(`
9`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,[l("You need to make sure you have "),e("code",null,"*.local"),l(" added to your "),e("code",null,".gitignore"),l(" to avoid them being checked into git, so you can keep keys you don't want to be exposed there.")],-1),e("p",null,[l("The format of the environment variables is "),e("code",null,"key=value"),l(". For variables to be statically embedded into the client bundle, meaning it is available in your JavaScript code, it needs to start with "),e("code",null,"VITE_"),l(".")],-1),e("p",null,[l("Examples of use cases: "),e("em",null,".env"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VITE_API_URL=https://mycoolapi.com")]),l(`
10`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VITE_API_KEY=[PUBLIC_KEY]")]),l(`
11`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,[e("em",null,".env.development"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VITE_API_URL=http://localhost:8080")]),l(`
12`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,[e("em",null,".env.development.local"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VITE_API_KEY=[PRIVATE_KEY]")]),l(`
13`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,"Then you can get the variables from the JavaScript code like this:",-1),e("div",{class:"language-js"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"js"),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#C792EA"}},"const"),e("span",{style:{color:"#BABED8"}}," url "),e("span",{style:{color:"#89DDFF"}},"="),e("span",{style:{color:"#BABED8"}}," "),e("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),e("span",{style:{color:"#89DDFF"}},"."),e("span",{style:{color:"#BABED8"}},"meta"),e("span",{style:{color:"#89DDFF"}},"."),e("span",{style:{color:"#BABED8"}},"env"),e("span",{style:{color:"#89DDFF"}},"."),e("span",{style:{color:"#BABED8"}},"VITE_API_URL")]),l(`
14`),e("span",{class:"line"})])])],-1)])]),1:n(()=>[...s[1]||(s[1]=[e("div",{class:"warning custom-block"},[e("p",{class:"custom-block-title"},"WARNING"),e("p",null,"Vue CLI is for old projects, if you have a new project you should use the Vite guide.")],-1),e("p",null,[l("Sometimes you want your app to behave differently in local development and production. Maybe they should point to a different backend or use different API keys. Vue has very good documentation about it, "),e("a",{href:"https://cli.vuejs.org/guide/mode-and-env.html#environment-variables",target:"_blank",rel:"noreferrer"},"Modes and Environment Variables"),l(". But I will try to keep it shorter, for the use I often need.")],-1),e("p",null,[l("You can create different "),e("code",null,".env"),l(" files at the root of your project.")],-1),e("p",null,[e("img",{src:d,alt:"project structure"})],-1),e("p",null,"Alternatives:",-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env                    # loaded in all cases")]),l(`
15`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.local              # loaded in all cases, ignored by git")]),l(`
16`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.development        # for vue-cli-service serve")]),l(`
17`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.development.local  # for vue-cli-service serve, ignored by git")]),l(`
18`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.test               # for vue-cli-service test:unit")]),l(`
19`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.test.local         # for vue-cli-service test:unit, ignored by git")]),l(`
20`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.staging            # custom mode, for --mode staging")]),l(`
21`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.staging.local      # custom mode, for --mode staging, ignored by git")]),l(`
22`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.production         # for vue-cli-service build and vue-cli-service test:e2e")

22]),l(`
23`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},".env.production.local   # for vue-cli-service build and vue-cli-service test:e2e, ignored by git")]),l(`
24`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,"env files with .local are ignored by git, so you can keep keys you don't want to be exposed there.",-1),e("p",null,[l("The format of the environment variables is "),e("code",null,"key=value"),l(". For variables to be statically embedded into the client bundle, meaning it is available in your JavaScript code, it needs to start with "),e("code",null,"VUE_APP_"),l(" ("),e("code",null,"NODE_ENV"),l(" and "),e("code",null,"BASE_URL"),l(" are also available).")],-1),e("p",null,[l("Examples of use cases: "),e("em",null,".env"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VUE_APP_API_URL=https://mycoolapi.com")]),l(`
25`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VUE_APP_API_KEY=[PUBLIC_KEY]")]),l(`
26`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,[e("em",null,".env.development"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VUE_APP_API_URL=http://localhost:8080")]),l(`
27`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,[e("em",null,".env.development.local"),l(":")],-1),e("div",{class:"language-"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"}),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#babed8"}},"VUE_APP_API_KEY=[PRIVATE_KEY]")]),l(`
28`),e("span",{class:"line"},[e("span",{style:{color:"#babed8"}})])])])],-1),e("p",null,"Then you can get the variables from the JavaScript code like this:",-1),e("div",{class:"language-js"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"js"),e("pre",{class:"shiki material-theme-palenight"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{color:"#C792EA"}},"const"),e("span",{style:{color:"#BABED8"}}," url "),e("span",{style:{color:"#89DDFF"}},"="),e("span",{style:{color:"#BABED8"}}," process"),e("span",{style:{color:"#89DDFF"}},"."),e("span",{style:{color:"#BABED8"}},"env"),e("span",{style:{color:"#89DDFF"}},"."),e("span",{style:{color:"#BABED8"}},"VUE_APP_API_URL")]),l(`
29`),e("span",{class:"line"})])])],-1)])]),_:1}),s[2]||(s[2]=e("p",null,"That's it 😃",-1)),s[3]||(s[3]=e("p",null,[l("Remember to avoid exposing private secrets in the bundle. Even if you have it in "),e("code",null,".env.local"),l(', it will be "somewhere" in the bundle after npm run build, though it is hard to find.')],-1))])}const E=o(u,[["render",v]]);export{_ as __pageData,E as default};