脚本宝典收集整理的这篇文章主要介绍了

vue-cli3环境变量与分环境打包

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><strong>第一步 : 了解环境变量概念</strong></p> <p><strong>我们可以根目录中的下列文件来指定环境变量:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=".env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-class">.env</span> # 在所有的环境中被载入 <span class="hljs-selector-class">.env</span><span class="hljs-selector-class">.local</span> # 在所有的环境中被载入,但会被 <span class="hljs-selector-tag">git</span> 忽略 <span class="hljs-selector-class">.env</span>.<span class="hljs-selector-attr">[mode]</span> # 只在指定的模式中被载入 <span class="hljs-selector-class">.env</span>.<span class="hljs-selector-attr">[mode]</span><span class="hljs-selector-class">.local</span> # 只在指定的模式中被载入,但会被 <span class="hljs-selector-tag">git</span> 忽略</code></pre> <p>环境变量文件只包含环境变量的“键=值”对:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ini"><code><span class="hljs-attr">FOO</span>=bar <span class="hljs-attr">VUE_APP_SECRET</span>=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用</code></pre> <p>除了 自定义的<strong>VUE_APP_</strong>* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:</p> <ul> <li>NODE_ENV - 会是 "development"、"production" 或 "test"<br /> 中的一个。具体的值取决于应用运行的模式。</li> <li>BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。</li> </ul> <p>为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。</p> <p>模式概念: <br />模式是 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 项目中一个重要的概念。一般情况下 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 项目有三个默认模式:</p> <ul> <li>development 模式用于 vue-cli-service serve</li> <li>production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e</li> <li>test 模式用于 vue-cli-service test:unit</li> </ul> <p>模式不等同于 NODE_ENV,一个模式可以包含多个环境变量。也就是说,每个模式都将 NODE_ENV的值设置为模式的名称(可重新赋值更改)——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。 </p> <p>你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如,如果你在项目根目录创建一个名为 .env.development 的文件,那么在这个文件里声明过的变量就只会在 development 模式下被载入。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;dev-build&quot;: &quot;vue-cli-service build --mode development&quot;," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">"dev-build"</span>: <span class="hljs-string">"vue-cli-service build --mode development"</span>,</code></pre> <p><strong>环境变量的使用 :</strong> <br />只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中(即在项目代码中使用)。你可以在应用的代码中这样访问它们:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="console.log(process.env.VUE_APP_SECRET)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">console</span><span class="hljs-selector-class">.log</span>(<span class="hljs-selector-tag">process</span><span class="hljs-selector-class">.env</span><span class="hljs-selector-class">.VUE_APP_SECRET</span>)</code></pre> <p><strong>理解指令 , 模式 , 环境变量之间的关系</strong><br />我们在项目中的package.json经常能看见以下这样的指令</p> <p><span class="img-wrap"><img data-src="/img/bVbomOD?w=391&amp;h=188" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>在一个 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules/.bin/vue-cli-service 访问这个命令。<br />vue-cli-service serve</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="用法:vue-cli-service serve [options] [entry] 选项: --open 在服务器启动时打开浏览器 --copy 在服务器启动时将 URL 复制到剪切版 --mode 指定环境模式 (默认值:development) --host 指定 host (默认值:0.0.0.0) --port 指定 port (默认值:8080) --https 使用 https (默认值:false)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>用法:vue-cli-service serve [options] [entry] 选项: <span class="hljs-comment">--open 在服务器启动时打开浏览器</span> <span class="hljs-comment">--copy 在服务器启动时将 URL 复制到剪切版</span> <span class="hljs-comment">--mode 指定环境模式 (默认值:development)</span> <span class="hljs-comment">--host 指定 host (默认值:0.0.0.0)</span> <span class="hljs-comment">--port 指定 port (默认值:8080)</span> <span class="hljs-comment">--https 使用 https (默认值:false)</span></code></pre> <p>vue-cli-service build</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="用法:vue-cli-service build [options] [entry|pattern] 选项: --mode 指定环境模式 (默认值:production) --dest 指定输出目录 (默认值:dist) --modern 面向现代浏览器带自动回退地构建应用 --target app | lib | wc | wc-async (默认值:app) --name 库或 Web Components 模式下的名字 (默认值:package.json 中的 &quot;name&quot; 字段或入口文件名) --no-clean 在构建项目之前不清除目标目录 --report 生成 report.html 以帮助分析包内容 --report-json 生成 report.json 以帮助分析包内容 --watch 监听文件变化" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>用法:vue-cli-service build [options] [entry|pattern] 选项: <span class="hljs-comment">--mode 指定环境模式 (默认值:production)</span> <span class="hljs-comment">--dest 指定输出目录 (默认值:dist)</span> <span class="hljs-comment">--modern 面向现代浏览器带自动回退地构建应用</span> <span class="hljs-comment">--target app | lib | wc | wc-async (默认值:app)</span> <span class="hljs-comment">--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)</span> <span class="hljs-comment">--no-clean 在构建项目之前不清除目标目录</span> <span class="hljs-comment">--report 生成 report.html 以帮助分析包内容</span> <span class="hljs-comment">--report-json 生成 report.json 以帮助分析包内容</span> <span class="hljs-comment">--watch 监听文件变化</span></code></pre> <p>以上是两个常用的cli指令 , 他们默认对应的分别是development和production模式 , 如果还想了解其他指令 , 可以访问: <a href="https://cli.vuejs.org/zh/guide/cli-service.html#cli-%E6%9C%8D%E5%8A%A1" rel="nofollow noreferrer" target="_blank">https://cli.vuejs.org/zh/guid...</a> CLI 服务</p> <p><strong>那么接下来 , 我们就开始创建一个用于打包测试环境的模式;</strong></p> <p><strong>修改package.json</strong><br />添加一行命令</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;test&quot;: &quot;vue-cli-service build --mode test&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">"test"</span>: <span class="hljs-string">"vue-cli-service build --mode test"</span></code></pre> <p><strong>添加.env.test文件</strong><br />在项目根路径创建.env.test文件,内容为</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="NODE_ENV='production' //表明这是生产环境(需要打包) VUE_APP_CURRENTMODE='test' // 表明生产环境模式信息 VUE_APP_BASEURL='http://***.****.com:8000' // 测试服务器地址" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ini"><code><span class="hljs-attr">NODE_ENV</span>=<span class="hljs-string">'production'</span> //表明这是生产环境(需要打包) <span class="hljs-attr">VUE_APP_CURRENTMODE</span>=<span class="hljs-string">'test'</span> // 表明生产环境模式信息 <span class="hljs-attr">VUE_APP_BASEURL</span>=<span class="hljs-string">'http://***.****.com:8000'</span> // 测试服务器地址</code></pre> <p><strong>修改项目中的api接口文件</strong><br />在我的项目中,一般会创建一个api.js 来管理所有的接口url<br />因为我们在本地开发环境中是通过代理来连接服务器的,所以将url写成这</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="`${baseUrl}/apis/v1/login`," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">`<span class="hljs-subst">${baseUrl}</span>/apis/v1/login`</span>,</code></pre> <p><strong>在文件开头通过环境变量改变baseUrl</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let baseUrl = ''; if (process.env.NODE_ENV == 'development') { baseUrl = &quot;&quot; } else if (process.env.NODE_ENV == 'production') { baseUrl = process.env.VUE_APP_BASEURL } else { baseUrl = &quot;&quot; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> baseUrl = <span class="hljs-string">''</span>; <span class="hljs-keyword">if</span> (process.env.NODE_ENV == <span class="hljs-string">'development'</span>) { baseUrl = <span class="hljs-string">""</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (process.env.NODE_ENV == <span class="hljs-string">'production'</span>) { baseUrl = process.env.VUE_APP_BASEURL } <span class="hljs-keyword">else</span> { baseUrl = <span class="hljs-string">""</span> } </code></pre> <p><strong>当需要为测试环境进行打包的时候 , 我们只需要运行下面指令进行打包</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run test" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs bash"><code style="word-break: break-word; white-space: initial;">npm run <span class="hljs-built_in">test</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-cli3环境变量与分环境打包

全部内容,希望文章能够帮你解决

vue-cli3环境变量与分环境打包

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过