https://zxuqian.cn/assets/js/60342b1f.8bb7ab47.js

1"use strict";(self.webpackChunkzxuqian_cn=self.webpackChunkzxuqian_cn||[]).push([["27214"],{3728(e,n,i){i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>r,default:()=>h,frontMatter:()=>c,metadata:()=>t,toc:()=>d});var t=i(8498),l=i(74848),s=i(28453);let c={slug:"how-to-import-env-variables-in-vite-2-0-projects",title:"\u5982\u4F55\u5728 Vite 2.0 \u9879\u76EE\u4E2D\u5BFC\u5165\u73AF\u5883\u53D8\u91CF",authors:"zxuqian",description:"\u73AF\u5883\u53D8\u91CF\u662F\u5728\u5F00\u53D1\u4E2D\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u53EF\u914D\u7F6E\u7684\u4FE1\u606F\u3002\u4F8B\u5982\u5728\u524D\u7AEF\u5F00\u53D1\u4E2D\uFF0C\u6211\u4EEC\u53EF\u4EE5\u914D\u7F6E API_KEY\u3001\u540E\u7AEF\u670D\u52A1\u5668\u5730\u5740\u7B49\u3002Vite 2.0 \u652F\u6301\u65B9\u4FBF\u7684\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF\uFF0C\u8FD9\u7BC7\u6587\u7AE0\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5982\u4F55\u5728 Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u521B\u5EFA\u548C\u5BFC\u5165\u73AF\u5883\u53D8\u91CF\u3002",tags:["\u524D\u7AEF","Vite","vite2.0","Vue"]},r,o={authorsImageUrls:[void 0]},d=[{value:"\u6DFB\u52A0\u73AF\u5883\u53D8\u91CF",id:"\u6DFB\u52A0\u73AF\u5883\u53D8\u91CF",level:2},{value:"\u6839\u636E\u5F00\u53D1\u73AF\u5883\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF",id:"\u6839\u636E\u5F00\u53D1\u73AF\u5883\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF",level:2},{value:"\u5C0F\u7ED3",id:"\u5C0F\u7ED3",level:2}];function a(e){let n={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.p,{children:"\u73AF\u5883\u53D8\u91CF\u662F\u5728\u5F00\u53D1\u4E2D\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u53EF\u914D\u7F6E\u7684\u4FE1\u606F\u3002\u4F8B\u5982\u5728\u524D\u7AEF\u5F00\u53D1\u4E2D\uFF0C\u6211\u4EEC\u53EF\u4EE5\u914D\u7F6E API_KEY\u3001\u540E\u7AEF\u670D\u52A1\u5668\u5730\u5740\u7B49\u3002Vite 2.0 \u652F\u6301\u65B9\u4FBF\u7684\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF\uFF0C\u8FD9\u7BC7\u6587\u7AE0\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5982\u4F55\u5728 Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u521B\u5EFA\u548C\u5BFC\u5165\u73AF\u5883\u53D8\u91CF\u3002"}),"\n",(0,l.jsx)(n.p,{children:"Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u9ED8\u8BA4\u6709\u4E0B\u9762 4 \u4E2A\u9ED8\u8BA4\u7684\u73AF\u5883\u53D8\u91CF\uFF1A"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"import.meta.env.MODE"})," - \u5F53\u524D\u8FD0\u884C\u73AF\u5883\uFF0C\u5728\u5F00\u53D1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"development"}),"\uFF0C\u4F8B\u5982\u901A\u8FC7 ",(0,l.jsx)(n.code,{children:"yarn dev"})," \u8FD0\u884C\u9879\u76EE\uFF0C\u5728\u4EA7\u54C1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"production"}),"\uFF0C \u4F8B\u5982\u4F7F\u7528 ",(0,l.jsx)(n.code,{children:"yarn serve"})," \u8FD0\u884C\u9879\u76EE\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"import.meta.env.BASE_URL"})," - \u9879\u76EE\u7684 URL \u8DDF\u8DEF\u5F84\uFF0C\u9ED8\u8BA4\u4E3A ",(0,l.jsx)(n.code,{children:"/"}),"\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"import.meta.env.PROD"})," - \u5224\u65AD\u662F\u5426\u4E3A\u751F\u4EA7\u73AF\u5883\uFF0C\u5728\u5F00\u53D1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"false"}),"\uFF0C\u5728\u4EA7\u54C1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"true"}),"\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"import.meta.env.DEV"})," - \u5224\u65AD\u662F\u5426\u4E3A\u5F00\u53D1\u73AF\u5883\uFF0C\u5728\u5F00\u53D1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"true"}),"\uFF0C\u5728\u4EA7\u54C1\u6A21\u5F0F\u4E0B\u4E3A ",(0,l.jsx)(n.code,{children:"false"}),"\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"\u8FD9\u51E0\u4E2A\u73AF\u5883\u53D8\u91CF\u53EF\u4EE5\u76F4\u63A5\u5728 Vite 2.0 \u9879\u76EE\u4EE3\u7801\u4E2D\u4F7F\u7528\uFF0C\u4F8B\u5982\u6253\u5370\u51FA\u6765\uFF1A"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-javascript",children:"console.log(import.meta.env.MODE); // development\n"})}),"\n",(0,l.jsx)(n.h2,{id:"\u6DFB\u52A0\u73AF\u5883\u53D8\u91CF",children:"\u6DFB\u52A0\u73AF\u5883\u53D8\u91CF"}),"\n",(0,l.jsxs)(n.p,{children:["Vite 2.0 \u9ED8\u8BA4\u4F7F\u7528 ",(0,l.jsx)(n.code,{children:"dotenv"})," \u6765\u52A0\u8F7D\u81EA\u5B9A\u4E49\u7684\u73AF\u5883\u53D8\u91CF\uFF0C\u5B83\u652F\u6301\u52A0\u8F7D ",(0,l.jsx)(n.code,{children:".env"})," \u6587\u4EF6\u4E2D\u5B9A\u4E49\u7684\u73AF\u5883\u53D8\u91CF\uFF0C\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u600E\u4E48\u5B9E\u73B0\u3002\u8FD9\u91CC\u4EE5 Vite 2.0 \u521B\u5EFA\u7684 Vue \u9879\u76EE\u4E3A\u4F8B\uFF0C\u5728\u9879\u76EE\u7684\u6839\u76EE\u5F55\u4E0B\uFF0C\u521B\u5EFA\u4E00\u4E2A ",(0,l.jsx)(n.code,{children:".env"})," \u6587\u4EF6\uFF1A"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"\u251C\u2500\u2500 .env # \u73AF\u5883\u53D8\u91CF\u6587\u4EF6\n\u251C\u2500\u2500 index.html\n\u251C\u2500\u2500 package.json\n\u251C\u2500\u2500 public\n\u251C\u2500\u2500 src\n\u2514\u2500\u2500 vite.config.js\n"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:".env"})," \u6587\u4EF6\u91CC\u8FB9\u7684\u5185\u5BB9\u662F\u952E\u503C\u5BF9\u5F62\u5F0F\u7684\uFF0C",(0,l.jsx)(n.code,{children:"="}

1)," \u5DE6\u8FB9\u662F\u73AF\u5883\u53D8\u91CF\u7684\u540D\u5B57\uFF0C\u53F3\u8FB9\u662F\u73AF\u5883\u53D8\u91CF\u7684\u503C\uFF0C\u4F8B\u5982\u6211\u4EEC\u5B9A\u4E49\u4E00\u4E2A ",(0,l.jsx)(n.code,{children:"VITE_END_POINT"})," \u73AF\u5883\u53D8\u91CF\uFF0C\u4FDD\u5B58\u540E\u7AEF\u7684 API \u5730\u5740\uFF1A"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"VITE_END_POINT=http://localhost:8080\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u4E4B\u540E\uFF0C\u6211\u4EEC\u53EF\u4EE5\u5728\u4EFB\u610F Vue \u7EC4\u4EF6\u4E2D\uFF0C\u901A\u8FC7 ",(0,l.jsx)(n.code,{children:"import.meta.env.\u73AF\u5883\u53D8\u91CF\u540D"})," \u6765\u4F7F\u7528\u73AF\u5883\u53D8\u91CF\uFF0C\u4F8B\u5982\uFF1A"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"<script setup>\nconsole.log(import.meta.env.VITE_END_POINT);\n<\/script>\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u8FD9\u91CC\u4F1A\u5728\u6D4F\u89C8\u5668\u63A7\u5236\u53F0\u4E2D\u6253\u5370\u51FA ",(0,l.jsx)(n.code,{children:"http://localhost:8080"}),"\u3002"]}),"\n",(0,l.jsxs)(n.p,{children:["\u73AF\u5883\u53D8\u91CF\u7684 ",(0,l.jsx)(n.code,{children:"VITE_"})," \u524D\u7F00\u662F\u5FC5\u987B\u7684\uFF0C\u8FD9\u6837\u624D\u80FD\u5728\u5BA2\u6237\u7AEF JS \u4EE3\u7801\u4E2D\u4F7F\u7528\uFF0C\u5982\u679C\u4E0D\u52A0\u524D\u7F00\uFF0C\u90A3\u4E48\u53EA\u80FD\u5728\u670D\u52A1\u7AEF\u4F7F\u7528\uFF0C\u4F8B\u5982\u4E0B\u65B9\u7684 ",(0,l.jsx)(n.code,{children:"API_SECRET"})," \u73AF\u5883\u53D8\u91CF\uFF0C\u662F\u4E0D\u80FD\u5728\u7EC4\u4EF6\u4EE3\u7801\u4E2D\u8BBF\u95EE\u5230\u7684\uFF1A"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"API_SECRET=123456\nVITE_END_POINT=http://localhost:8080\n"})}),"\n",(0,l.jsx)(n.admonition,{title:"\u6CE8\u610F",type:"caution",children:(0,l.jsx)(n.p,{children:"\u66B4\u9732\u7ED9\u5BA2\u6237\u7AEF\u7684\u73AF\u5883\u53D8\u91CF\uFF0C\u56E0\u4E3A\u53EF\u4EE5\u76F4\u63A5\u5728\u6D4F\u89C8\u5668\u4E2D\u770B\u5230\uFF0C\u6240\u4EE5\u4E0D\u8981\u5305\u542B\u654F\u611F\u4FE1\u606F\uFF0C\u4F8B\u5982\u5BC6\u7801\u3001API \u5BC6\u94A5\u7B49\u3002"})}),"\n",(0,l.jsx)(n.h2,{id:"\u6839\u636E\u5F00\u53D1\u73AF\u5883\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF",children:"\u6839\u636E\u5F00\u53D1\u73AF\u5883\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:".env"})," \u4E2D\u7684\u73AF\u5883\u53D8\u91CF\uFF0C\u9ED8\u8BA4\u5728\u5F00\u53D1\u548C\u4EA7\u54C1\u73AF\u5883\u4E0B\u90FD\u4F1A\u52A0\u8F7D\uFF0C\u4E0D\u8FC7 Vite 2.0 \u8FD8\u652F\u6301\u6309\u5F00\u53D1\u73AF\u5883\u6765\u52A0\u8F7D\u5BF9\u5E94\u7684 ",(0,l.jsx)(n.code,{children:".env"})," \u6587\u4EF6\uFF0C\u53EA\u9700\u8981\u5728 ",(0,l.jsx)(n.code,{children:".env"})," \u6587\u4EF6\u540D\u540E\u9762\u52A0\u4E0A\u540E\u7F00\uFF0C\u4F8B\u5982\uFF1A"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:".env.local"}),"\uFF0C\u5728\u6240\u6709\u73AF\u5883\u4E0B\u52A0\u8F7D\uFF0C\u4F46\u4F1A\u88AB git \u5FFD\u7565\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:".env.[mode]"}),"\uFF0C\u53EA\u5728\u7279\u5B9A\u73AF\u5883\u4E0B\u52A0\u8F7D\uFF0C\u4F8B\u5982 ",(0,l.jsx)(n.code,{children:".env.development"})," \u53EA\u5728\u5F00\u53D1\u73AF\u5883\u4E0B\u52A0\u8F7D\uFF0C",(0,l.jsx)(n.code,{children:".env.production"})," \u53EA\u5728\u751F\u4EA7\u73AF\u5883\u4E0B\u52A0\u8F7D\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:".env.[mode].local"}),"\uFF0C\u548C ",(0,l.jsx)(n.code,{children:".env.[mode]"})," \u7C7B\u4F3C\uFF0C\u4F46\u662F\u4F1A\u88AB git \u5FFD\u7565\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"\u5C0F\u7ED3",children:"\u5C0F\u7ED3"}),"\n",(0,l.jsx)(n.p,{children:"\u597D\u4E86\uFF0C\u8FD9\u4E2A\u5C31\u662F\u5728 Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u5B9A\u4E49\u548C\u4F7F\u7528\u73AF\u5883\u53D8\u91CF\u7684\u65B9\u6CD5\uFF0C\u5982\u679C\u89C9\u5F97\u672C\u6587\u6709\u5E2E\u52A9\uFF0C\u8BF7\u5E2E\u5FD9\u5206\u4EAB\u7ED9\u5927\u5BB6\uFF01\u8C22\u8C22\uFF01"})]})}function h(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},28453(e,n,i){i.d(n,{R:()=>c,x:()=>r});var t=i(96540);let l={},s=t.createContext(l);function c(e){let n=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:c(e.components),t.createElement(s.Provider,{value:n},e.children)}},8498(e){e.exports=JSON.parse('{"permalink":"/blog/how-to-import-env-variables-in-vite-2-0-projects","source":"@site/blog/2021/11/16/how-to-import-env-variables-in-vite-2-0-projects/index.md","title":"\u5982\u4F55\u5728 Vite 2.0 \u9879\u76EE\u4E2D\u5BFC\u5165\u73AF\u5883\u53D8\u91CF","description":"\u73AF\u5883\u53D8\u91CF\u662F\u5728\u5F00\u53D1\u4E2D\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u53EF\u914D\u7F6E\u7684\u4FE1\u606F\u3002\u4F8B\u5982\u5728\u524D\u7AEF\u5F00\u53D1\u4E2D\uFF0C\u6211\u4EEC\u53EF\u4EE5\u914D\u7F6E API_KEY\u3001\u540E\u7AEF\u670D\u52A1\u5668\u5730\u5740\u7B49\u3002Vite 2.0 \u652F\u6301\u65B9\u4FBF\u7684\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF\uFF0C\u8FD9\u7BC

17\u6587\u7AE0\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5982\u4F55\u5728 Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u521B\u5EFA\u548C\u5BFC\u5165\u73AF\u5883\u53D8\u91CF\u3002","date":"2021-11-16T00:00:00.000Z","tags":[{"inline":true,"label":"\u524D\u7AEF","permalink":"/blog/tags/\u524D\u7AEF"},{"inline":true,"label":"Vite","permalink":"/blog/tags/vite"},{"inline":true,"label":"vite2.0","permalink":"/blog/tags/vite-2-0"},{"inline":true,"label":"Vue","permalink":"/blog/tags/vue"}],"readingTime":2,"hasTruncateMarker":true,"authors":[{"name":"\u5CF0\u534E\u524D\u7AEF\u5DE5\u7A0B\u5E08","title":"\u8F6F\u4EF6\u5DE5\u7A0B\u5E08 / B\u7AD9UP\u4E3B","url":"https://github.com/zxuqian","imageURL":"https://zxuqian.cn/img/logo.webp","key":"zxuqian","page":null}],"frontMatter":{"slug":"how-to-import-env-variables-in-vite-2-0-projects","title":"\u5982\u4F55\u5728 Vite 2.0 \u9879\u76EE\u4E2D\u5BFC\u5165\u73AF\u5883\u53D8\u91CF","authors":"zxuqian","description":"\u73AF\u5883\u53D8\u91CF\u662F\u5728\u5F00\u53D1\u4E2D\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u53EF\u914D\u7F6E\u7684\u4FE1\u606F\u3002\u4F8B\u5982\u5728\u524D\u7AEF\u5F00\u53D1\u4E2D\uFF0C\u6211\u4EEC\u53EF\u4EE5\u914D\u7F6E API_KEY\u3001\u540E\u7AEF\u670D\u52A1\u5668\u5730\u5740\u7B49\u3002Vite 2.0 \u652F\u6301\u65B9\u4FBF\u7684\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF\uFF0C\u8FD9\u7BC7\u6587\u7AE0\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5982\u4F55\u5728 Vite 2.0 \u521B\u5EFA\u7684\u9879\u76EE\u4E2D\uFF0C\u521B\u5EFA\u548C\u5BFC\u5165\u73AF\u5883\u53D8\u91CF\u3002","tags":["\u524D\u7AEF","Vite","vite2.0","Vue"]},"unlisted":false,"prevItem":{"title":"\u4F7F\u7528 HTML \u539F\u751F kbd \u6807\u7B7E\u663E\u793A\u5FEB\u6377\u952E\u6837\u5F0F","permalink":"/blog/use-kbd-html-tag-to-display-shortcuts"},"nextItem":{"title":"\u914D\u7F6E Vite 2.0 \u9879\u76EE\u542F\u52A8\u540E\u81EA\u52A8\u6253\u5F00\u6D4F\u89C8\u5668","permalink":"/blog/how-to-automatically-open-browser-in-vite-projects"}}')}}]);