vue项目环境变量配置的实现方法

Posted 2023-03-14

参考技术A 问题
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。
编译时
新建env.js
let
baseUrl
=
'';
if(process.env.NODE_ENV
==
'production')
baseUrl
=
'https://xxxxxxxxx';

else
if
(process.env.NODE_ENV
==
'development')

baseUrl
=
'/api'

export

baseUrl

process.env.NODE_ENV
是通过webpack
内置的
DefinePlugin
为所有的依赖定义的变量
webpack.dev.conf.js
new
webpack.DefinePlugin(
'process.env.NODE_ENV':
'development'
),
webpack.prod.conf.js
new
webpack.DefinePlugin(
'process.env.NODE_ENV':
'production'
),
这样在项目任意文件中都能调用process.env.NODE_ENV变量，本人测试过，process并不是挂载在window变量上，猜测可能是挂载到了node的process变量。
在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue-cli配置环境变量的方法

vue cli4.0 配置环境变量

参考技术A

------------------正文开始------------------

开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？

为了更加方便消化本文章，建议先看下官方文档：

环境变量和模式

看完官方的文档如果还没有明白，可以参考本文。

在vue-cli 构建的项目中，默认有3种模式，如下图：

我个人的理解就是：

你执行npm run serve时，对应的环境就是开发环境；

你执行npm run build时，对应的环境就是生产环境。

如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。

来，左边跟我一起画个龙，在你右边儿画一道彩虹 画完了，开始进入主题了

------------------进入主题------------------

如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：

基本格式如下：

<pre>NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址</pre>

如我本地环境的配置就如下图所示：

我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。

如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：

请注意我配置文件中的 serve 与 build 。

文件已创建好，配置语句也已写好。怎么用它呢？

首页你需要哪个环境，就执行哪个环境的命令语句。

比如我现在需要local环境，就执行 npm run local-serve 。如下图所示：

然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

比如我们在axios请求中，就可以把它的baseURL设置为 process.env.VUE_APP_URL ，如下图所示：

后面的"/web"是根据我自己接口来的，你别也写个"/web"。

如果你不确定你自己现在是在哪个环境变量下，可以 console.log("当前环境变量："+process.env.NODE_ENV) 和 console.log("当前环境路径："+process.env.VUE_APP_URL) 看下。

像我的项目中就是下面这2个东东：

输出的内容就是.env.local文件里面配置的环境变量。

为了更好的理解，我们再执行一条语句， npm run serve ,看看此时的环境变量是哪个？

为什么呢？

因为 npm run serve 默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：

总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！