vite+vue3+typescript的env变量使用方法
<div class="output_wrapper" id="output_wrapper_id" style="font-size: 16px; color: rgba(62, 62, 62, 1); line-height: 1.6; word-spacing: 0; letter-spacing: 0; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif"><h3 id="henv" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.3em; border-bottom: 2px solid rgba(250, 84, 28, 1)"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(250, 84, 28, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 0; border-top-right-radius: 3px; border-top-left-radius: 3px">env环境变量</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgba(250, 84, 28, 0.25); border-right: 20px solid rgba(0, 0, 0, 0)"> </span></h3><p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">vite在import.meta.env 对象上暴露环境变量。固定的环境变量有</p>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env.MODE</code>: string类型，应用运行的模式，通过 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">vite --modeldev</code> 或者 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">vite build --modelprod</code> 指定</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env.BASE_URL</code>: string类型，由base配置项决定</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env.PROD</code>: boolean，应用是否运行在生成环境</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env.DEV</code>: boolean，应用是否运行在开发环境</li>
</ul>
<h3 id="henv-1" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.3em; border-bottom: 2px solid rgba(250, 84, 28, 1)"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(250, 84, 28, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 0; border-top-right-radius: 3px; border-top-left-radius: 3px">.env 文件</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgba(250, 84, 28, 0.25); border-right: 20px solid rgba(0, 0, 0, 0)"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">vite从下列文件加载额外的环境变量</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="css language-css hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important"><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.env</span> # 所有情况下都会加载<br><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.env</span><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.local</span> # 所有情况下都会加载，但会被 <span class="hljs-selector-tag" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">git</span> 忽略<br><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.env</span>.<span class="hljs-selector-attr" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0; word-wrap: inherit !important; word-break: inherit !important"></span> # 只在指定模式下加载<br><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.env</span>.<span class="hljs-selector-attr" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0; word-wrap: inherit !important; word-break: inherit !important"></span><span class="hljs-selector-class" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">.local</span> # 只在指定模式下加载，但会被 <span class="hljs-selector-tag" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">git</span> 忽略<br></code></pre>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">加载的环境变量通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env</code>暴露给客户端源码</p>
<h3 id="henv-2" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.3em; border-bottom: 2px solid rgba(250, 84, 28, 1)"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(250, 84, 28, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 0; border-top-right-radius: 3px; border-top-left-radius: 3px">.env 文件目录</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgba(250, 84, 28, 0.25); border-right: 20px solid rgba(0, 0, 0, 0)"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">envDir</code>配置项配置，如果不配置，默认是跟<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">vite.config</code>文件所在同目录</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">{<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">plugins</span>: ,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">envDir</span>: <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'./env'</span>,<br> ...<br> };<br></code></pre>
<h3 id="henv-3" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.3em; border-bottom: 2px solid rgba(250, 84, 28, 1)"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(250, 84, 28, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 0; border-top-right-radius: 3px; border-top-left-radius: 3px">env前缀</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgba(250, 84, 28, 0.25); border-right: 20px solid rgba(0, 0, 0, 0)"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">为了防止意外地将一些环境变量泄露到客户端，只要以<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">VITE_</code>为前缀的变量才会暴露给经过vite处理的代码，例如</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">APP=demo<br>VITE_KEY=<span class="hljs-number" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(174, 135, 250, 1); word-wrap: inherit !important; word-break: inherit !important">123</span><br></code></pre>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">只有<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">VITE_KEY</code>会被暴露为 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env.VITE_KEY</code>提供给客户端源码，而<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">APP</code>不会。<br>当然也可以自定义env变量的前缀，使用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">envPrefix</code>配置项</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">{<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">plugins</span>: ,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">envDir</span>: <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'./env'</span>,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">envPrefix</span>: [<span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'VITE_'</span>,<span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'DZ_'</span>],<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">build</span>:{<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">manifest</span>: <span class="hljs-literal" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(174, 135, 250, 1); word-wrap: inherit !important; word-break: inherit !important">true</span><br> }<br> };<br></code></pre>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">添加配置项后，一下配置内容</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">APP=demo<br>VITE_KEY=<span class="hljs-number" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(174, 135, 250, 1); word-wrap: inherit !important; word-break: inherit !important">123</span><br>DZ_API=http:<span class="hljs-comment" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(128, 128, 128, 1); word-wrap: inherit !important; word-break: inherit !important">//www.baidu.com</span><br></code></pre>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">VITE_KEY</code>和<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">DZ_API</code>都会通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">import.meta.env</code>暴露</p>
<h3 id="hviteconfigenv" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.3em; border-bottom: 2px solid rgba(250, 84, 28, 1)"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(250, 84, 28, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 0; border-top-right-radius: 3px; border-top-left-radius: 3px">vite.config中使用env</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgba(250, 84, 28, 0.25); border-right: 20px solid rgba(0, 0, 0, 0)"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">根据不同的mode，生成文件到不同目录。通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1)">loadEnv</code>加载环境变量</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important"><span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">import</span> { defineConfig, loadEnv } <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">from</span> <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'vite'</span><br><span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">import</span> vue <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">from</span> <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'@vitejs/plugin-vue'</span><br><br><span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">export</span> <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">default</span> defineConfig(<span class="hljs-function" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">(<span class="hljs-params" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(255, 152, 35, 1); word-wrap: inherit !important; word-break: inherit !important">{mode}</span>)=></span>{<br> <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">const</span> envConfig = loadEnv(mode,<span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'./env'</span>)<br> <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">const</span> result = {<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">plugins</span>: ,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">envDir</span>: <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'./env'</span>,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">envPrefix</span>: [<span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'VITE_'</span>,<span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">'DZ_'</span>],<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">build</span>:{<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">manifest</span>: <span class="hljs-literal" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(174, 135, 250, 1); word-wrap: inherit !important; word-break: inherit !important">true</span>,<br> <span class="hljs-attr" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(165, 218, 45, 1); word-wrap: inherit !important; word-break: inherit !important">outDir</span>: <span class="hljs-string" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(238, 220, 112, 1); word-wrap: inherit !important; word-break: inherit !important">`./dist/<span class="hljs-subst" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0; word-wrap: inherit !important; word-break: inherit !important">${mode}</span>`</span><br> }<br> };<br> <span class="hljs-keyword" style="font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: rgba(248, 35, 117, 1); word-wrap: inherit !important; word-break: inherit !important">return</span> result;<br>})<br></code></pre>
<h2 id="htypescript" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0; font-weight: bold; font-size: 1.4em"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0">TypeScript 智能提示</span></h2>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0">在src目录下的env.d.ts文件，添加如下内容</p>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="typescript language-typescript" style="overflow-wrap: break-word; padding: 2px 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1); line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">interface ImportMetaEnv {<br> readonly VITE_KEY: string;<br> readonly DZ_API: string;<br> // 更多环境变量...<br>}<br><br>interface ImportMeta {<br> readonly env: ImportMetaEnv<br>}<br></code></pre></div>
</div>
<div id="MySignature" role="contentinfo">
微信公众号: abplearn
QQ: 1260825783<br><br>
来源：https://www.cnblogs.com/zhaord/p/16009131.html
頁:
[1]