mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-06 03:57:50 +08:00
23 lines
12 KiB
JavaScript
23 lines
12 KiB
JavaScript
import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","filePath":"guide/vue2/env.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/env.md"},p=o(`<h1 id="配置多环境变量" tabindex="-1">配置多环境变量 <a class="header-anchor" href="#配置多环境变量" aria-label="Permalink to "配置多环境变量""></a></h1><p><code>package.json</code> 里的 <code>scripts</code> 配置 <code>serve</code> <code>stage</code> <code>build</code>，通过 <code>--mode xxx</code> 来执行不同环境</p><ul><li>通过 <code>npm run serve</code> 启动本地 , 执行 <code>development</code></li><li>通过 <code>npm run stage</code> 打包测试 , 执行 <code>staging</code></li><li>通过 <code>npm run build</code> 打包正式 , 执行 <code>production</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">serve</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service serve --open</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">stage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service build --mode staging</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h5 id="配置介绍" tabindex="-1">配置介绍 <a class="header-anchor" href="#配置介绍" aria-label="Permalink to "配置介绍""></a></h5><p> 以 <code>VUE_APP_</code> 开头的变量，在代码中可以通过 <code>p<wbr>rocess.env.VUE_APP_</code> 访问。 比如：<code>VUE_APP_ENV = 'development'</code> 通过 <code>p<wbr>rocess.env.VUE_APP_ENV</code> 访问。 当然，除了 <code>VUE_APP_*</code> 变量之外，在你的应用代码中始终可用的还有两个特殊的变量<code>NODE_ENV</code> 和<code>BASE_URL</code></p><p>在项目根目录中新建<code>.env.*</code></p><ul><li>.env.development 本地开发环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>.env.staging 测试环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">staging</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>.env.production 正式环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span></code></pre></div><p>这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV <code>development</code> <code>staging</code> <code>production</code> 变量我们统一在 <code>src/config/env.*.js</code> 里进行管理。</p><p>这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？ <strong>修改起来方便，不需 要重启项目，符合开发习惯。</strong></p><p>config/index.js</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境引入不同配置 p<wbr>rocess.env.NODE_ENV</span></span>
|
||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> config </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./env.</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">VUE_APP_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> config</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>配置对应环境的变量，拿本地环境文件 <code>env.development.js</code> 举例，用户可以根据需求修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 本地环境配置</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-h5-template</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baseUrl</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">http://localhost:9018</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 项目地址</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baseApi</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://test.xxx.com/api</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 本地api请求地址</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">APPID</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">APPSECRET</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>根据环境不同，变量就会不同了</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境不同引入不同baseApi地址</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">baseApi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(baseApi)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,21),e=[p];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{C as __pageData,A as default};
|