Vue.js 判断当前是开发环境还是生产环境

淩亂°似流年 2022-11-15 11:54 493阅读 0赞

**1，判断样例**  
（1）有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境，然后根据不同环境执行不同的逻辑代码。下面是一个简单的样例：

if (process.env.NODE_ENV === "development") {
      alert("开发环境");
    }else {
      alert("生产环境");
    }

![20210401090236285.png][]

![20210401090247347.png][]

**2，判断原理**  
（1）在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

（2）打开 dev.env.js 文件，可以看到 NODE\_ENV 变量值为 development。

'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
     
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })

（3）打开 prod.env.js 文件，可以看到 NODE\_ENV 变量值为 production。

'use strict'
    module.exports = {
      NODE_ENV: '"production"'
    }

[20210401090236285.png]: /images/20221022/075b984472a04bc68c30f36542dde94e.png
[20210401090247347.png]: https://img-blog.csdnimg.cn/20210401090247347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210401090344101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70