精华内容
下载资源
问答
  • process.env.node_env
    千次阅读 多人点赞
    2021-04-26 17:42:00

    一、 process.env.NODE_ENV是什么?

    在node中,有全局变量process表示的是当前的node进程。
    process.env包含着关于系统环境的信息,但是process.env中并不存在NODE_ENV这个东西。

    NODE_ENV是一个用户自定义的变量,在webpack中它的用途是判断生产环境或开发环境

    为了查看 process的基本信息,我们可以在文件夹中 新建一个process.js文件,在里面加一句代码console.log(process);然后进入该文件夹,执行node process.js可以在命令行中打印如下信息:

     

    $ node process.js
    process {
      title: 'node',
      version: 'v4.4.4',
      moduleLoadList: 
       [....],
      versions: 
       { http_parser: '2.5.2',
         node: '4.4.4',
         v8: '4.5.103.35',
         uv: '1.8.0',
         zlib: '1.2.8',
         ares: '1.10.1-DEV',
         icu: '56.1',
         modules: '46',
         openssl: '1.0.2h' },
      arch: 'x64',
      platform: 'darwin',
      release: 
       { name: 'node',
         lts: 'Argon',
         sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
         headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
      argv: 
       [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         '/Users/tugenhua/个人demo/process.js' ],
      execArgv: [],
      env: 
       { TERM_PROGRAM: 'Apple_Terminal',
         SHELL: '/bin/zsh',
         TERM: 'xterm-256color',
         TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
         Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
         TERM_PROGRAM_VERSION: '404',
         TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
         USER: 'tugenhua',
         SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
         PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
         PWD: '/Users/tugenhua/个人demo',
         LANG: 'zh_CN.UTF-8',
         XPC_FLAGS: '0x0',
         XPC_SERVICE_NAME: '0',
         SHLVL: '1',
         HOME: '/Users/tugenhua',
         LOGNAME: 'tugenhua',
         SECURITYSESSIONID: '186a8',
         OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
         ZSH: '/Users/tugenhua/.oh-my-zsh',
         PAGER: 'less',
         LESS: '-R',
         LC_CTYPE: 'zh_CN.UTF-8',
         LSCOLORS: 'Gxfxcxdxbxegedabagacad',
         NVM_DIR: '/Users/tugenhua/.nvm',
         NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
         NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
         NVM_RC_VERSION: '',
         MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
         NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
         NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
         _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
      pid: 14034,
      features: 
       { debug: false,
         uv: true,
         ipv6: true,
         tls_npn: true,
         tls_sni: true,
         tls_ocsp: true,
         tls: true },
      _needImmediateCallback: false,
      config: {},
      nextTick: [Function: nextTick],
      _tickCallback: [Function: _tickCallback],
      _tickDomainCallback: [Function: _tickDomainCallback],
      stdout: [Getter],
      stderr: [Getter],
      stdin: [Getter],
      openStdin: [Function],
      exit: [Function],
      kill: [Function],
      mainModule: 
       Module {
         id: '.',
         exports: {},
         parent: null,
         filename: '/Users/tugenhua/个人demo/process.js',
         loaded: false,
         children: [],
         paths: 
          [ '/Users/tugenhua/个人demo/node_modules',
            '/Users/tugenhua/node_modules',
            '/Users/node_modules',
            '/node_modules' ] } }
    

    如上就可以看到 process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。

    二、process.env.NODE_ENV该如何配置?

    process.env属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据,那么我们如何配置它呢?

    方法1:配置环境变量

    • windows环境配置如下:

     

    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在 
    set NODE_ENV 
    
    #如果不存在则添加环境变量 
    set NODE_ENV=production 
    
    #环境变量追加值 set 变量名=%变量名%;变量内容 
    set path=%path%;C:\web;C:\Tools 
    
    #某些时候需要删除环境变量 
    set NODE_ENV=
    
    • Linux配置(mac系统环境也属于这个)如下:

     

    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在
    echo $NODE_ENV
    
    #如果不存在则添加环境变量
    export NODE_ENV=production
    
    #环境变量追加值
    export path=$path:/home/download:/usr/local/
    
    #某些时候需要删除环境变量
    unset NODE_ENV
    
    #某些时候需要显示所有的环境变量
    env
    

    注意:如果NODE_ENV设置为production后,所有的项目都会处于正式环境中。
    此时使用命令npm install下载依赖包时,只会把package.json中的dependencies依赖项下载下来,对于devDependencies中的依赖包是下载不下来的。因此需要使用上面的命令unset NODE_ENV删除刚刚设置的环境变量。

    方法2:使用DefinePlugin

    DefinePlugin官网的解释是:DefinePlugin允许我们创建全局变量,可以在编译时进行设置。

    因此可以使用该属性来设置全局变量来区分开发环境和正式环境,这就是DefinePlugin的基本功能。

    我们可以在webpack.config.js中添加如下代码配置全局变量信息,因为当webpack进行编译的时候会全局设置变量,如下代码:

     

    module.exports = {
      plugins: [
        // 设置环境变量信息
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(true),
          VERSION: JSON.stringify('5fa3b9'),
          BROWSER_SUPPORTS_HTML5: true,
          TWO: '1+1',
          'typeof window': JSON.stringify('object'),
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
          }
        })
      ]
    }
    

    package.json中的打包配置如下:

     

    "scripts": {
      "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    },
    

    这样配置完成后,为了验证一下是否是全局变量,运行npm run dev打包后,在我们项目入口js文件中打印下即可:

     

    console.log(process.env.NODE_ENV); // 打印结果为 'development' 
    

    发现process.env.NODE_ENV已经被作为全局变量打印出来了,因此在项目打包中为了区分开发环境和正式环境我们可以使用这种方法。

    关于cross-env

    • 什么是cross-env呢?
      它是运行跨平台设置和使用环境变量的脚本。

    • 它的作用是啥?
      当我们使用DefinePlugin这种方法设置NODE_ENV时,大多数windows命令会提示将会阻塞或者异常,或者windows不支持NODE_ENV=development的这样的设置方式,会报错。因此cross-env出现了。我们可以使用cross-env命令来实现全开发平台的兼容。
      要使用该命令的话,我们首先需要在我们的项目中安装该命令:

     

    npm install --save-dev cross-env
    

    在package.json中的scripts命令如下:

     

    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    }
    

    三、vue-cli3.0中的process.env.NODE_ENV

    使用vue-cli3构建的项目就简单多了,因为vue-cli3使用上述的DefinePlugin方式帮你把process.env.NODE_ENV配置好了,我们不需要再自己去配置。
    它自带了三种模式:

    development:在vue-cli-service serve下,即开发环境使用
    production:在vue-cli-service build和vue-cli-service test:e2e下,即正式环境使用
    test: 在vue-cli-service test:unit下使用

    在package.json中的scripts命令如下

     

    {
      "name": "",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "vue-cli-service serve", //本地开发运行,会把process.env.NODE_ENV设置为'development'
        "build": "vue-cli-service build", //默认打包模式,会把process.env.NODE_ENV设置为'production'
      },
      "dependencies": {
      }
    }


     转自https://www.jianshu.com/p/f4638f5df1c7

    更多相关内容
  • 但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。 为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件...
  • babel插件只能替换开发基于process.env.NODE_ENV的简单替换插件。 该插件是元程序学习课程LT。用法在您的.babelrc中{ " plugins " : [ [ " babel-plugin-replace-only-development " , { " rules " : { " ...
  • process.env.NODE_ENV

    2022-06-24 17:23:10
    process.env 对象上,并且值为 development,我们 只 可以在 server/index.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV,而无法在其它脚本中访问 不过,如果采用的是webpack打包方式,注册下面这个...

    一、process.env

    查阅文档的时候可以看到这样一句话:process 对象提供有关当前 Node.js 进程的信息并对其进行控制。

    const process = require('node:process');
    

    在计组的知识点中我们知道:process(进程)是系统进行资源分配和调度的基本单位,是操作系统结构的基础。那么,在node.js中,process是否也有操作系统结构的信息呢?

    打印一下看看:

    const process = require('process')
    const express = require('express')
    const app = express()
    
    app.get('/',(req,res)=>{
        console.log(process);
    })
    
    app.listen(port, host)
    

    访问localhost:3000后查看控制台:

    在这里插入图片描述

    可以看到,process代表的值是计算机系统相关的信息,而process.env则表示的是系统环境变量

    理解process可以看作是node.js中的一个全局变量。

    二、NODE_ENV

    注意:我本来想在文档中找找这个属性的,可是它并不存在于文档中,这是因为,NODE_ENV仅仅是一个自定义变量,据说最早是express社区中流传这个自定义变量,后来慢慢就成为了前端开发中的一个使用规范。

    注意看上面那一张图片中框起来的部分,为什么会加上这个环境变量呢?

    这是因为:在开发的过程中,我们可能需要同时面临多种环境。比如:

    • 开发:API_URL =Ihttp://127.0.0.1:3000
    • 线上部署环境:API_URL =https://imNeko:3000

    这也是为什么,有时候我们在开发的时候感觉代码项目没有问题,可是部署到线上时出现了差错。

    在这里我以一个基于Nuxt.js的项目中的package.json来举例:

    "scripts": {
        // 让 cross-env 把 NODE_ENV 设置为 development, 再运行指定文件 server/index.js
        "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
        "build": "nuxt build",
        "start": "cross-env NODE_ENV=production node server/index.js",
        "generate": "nuxt generate"
    },
    

    从上面的代码可以看出:

    当我们执行npm run dev的时候,NODE_ENV 将会被注入到 process.env 对象上,并且值为 development,我们 可以在 server/index.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV,而无法在其它脚本中访问

    不过,如果采用的是webpack打包方式,注册下面这个插件既可以让其他文件访问到process.env.NODE_ENV

    const webpack = require('webpack');
    module.exports = {
      // ...
      plugins: [
        // DefinePlugin允许我们创建全局变量,可以在编译时进行设置
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': '"development"'
        })
      ]
      // ...
    }
    

    现在看看如何在项目中切换环境变量:

    let env = process.env.NODE_ENV
    let cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
    let cssSourceMapProduct = (env === 'production' && config.build.productionSourceMap)
    let useCssSourceMap = cssSourceMapDev || cssSourceMapProduct
    

    我们可以根据process.env.NODE_ENV的值来选择编译打包什么文件。

    2.1 设置NODE_ENV

    2.1.1临时设置

    在cmd窗口中输入这段代码:

    set NODE_ENV = production
    // set NODE_ENV = development
    

    然后打印process

    在这里插入图片描述

    2.1.2永久设置

    在系统环境变量下面手动添加即可。

    展开全文
  • process.env.NODE_ENV

    process.env.NODE_ENV详解

    前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。

    一、 process.env.NODE_ENV是什么?

    在node中,有全局变量process表示的是当前的node进程。

    process.env包含着关于系统环境的信息,但是process.env中并不存在NODE_ENV。

    NODE_ENV是一个用户自定义的变量,在webpack中它的用途是判断生产环境或开发环境

    例如:

    process.env.NODE_ENV === "development" ? "测试/开发地址" : "生产环境地址"
    

    通过环境变量来区分开发环境还是生产环境,当目前处于开发环境,环境变量为development;如果当前环境是生产环境,环境变量是production。提出来封装,抛出对应环境的服务。

    在这里插入图片描述

    可以在axios创建实例的时候,把这个baseUrl导入,使用。

    import baseUrl from './config'
    const service = axios.create({
      baseUrl,  // 设置全局基地址
      timeOut: 5000,  // 设置超时时间
    }) 
    

    在这里插入图片描述
    如果我想在vue.config.js中动态设置反向代理

    devServer: {
        proxy: { // 反向代理
          '/api': {
            target: process.env.VUE_APP_BASE_API,
            pathRewrite: {
              '^/api': ''
            },
            logLevel: 'debug', // 可以在终端窗口看到真实代理地址 
          }
        }
      }
    
    

    Vue配置环境变量 原来是这么使用的呀

    Vue配置多环境变量,原来是这么回事啊

    为了查看 process的基本信息,我们可以在文件夹中 新建一个process.js文件,在里面加一句代码console.log(process);然后进入该文件夹,执行node process.js可以在命令行中打印如下信息:

    $ node process.js
    process {
      title: 'node',
      version: 'v4.4.4',
      moduleLoadList: 
       [....],
      versions: 
       { http_parser: '2.5.2',
         node: '4.4.4',
         v8: '4.5.103.35',
         uv: '1.8.0',
         zlib: '1.2.8',
         ares: '1.10.1-DEV',
         icu: '56.1',
         modules: '46',
         openssl: '1.0.2h' },
      arch: 'x64',
      platform: 'darwin',
      release: 
       { name: 'node',
         lts: 'Argon',
         sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
         headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
      argv: 
       [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         '/Users/tugenhua/个人demo/process.js' ],
      execArgv: [],
      env: 
       { TERM_PROGRAM: 'Apple_Terminal',
         SHELL: '/bin/zsh',
         TERM: 'xterm-256color',
         TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
         Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
         TERM_PROGRAM_VERSION: '404',
         TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
         USER: 'tugenhua',
         SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
         PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
         PWD: '/Users/tugenhua/个人demo',
         LANG: 'zh_CN.UTF-8',
         XPC_FLAGS: '0x0',
         XPC_SERVICE_NAME: '0',
         SHLVL: '1',
         HOME: '/Users/tugenhua',
         LOGNAME: 'tugenhua',
         SECURITYSESSIONID: '186a8',
         OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
         ZSH: '/Users/tugenhua/.oh-my-zsh',
         PAGER: 'less',
         LESS: '-R',
         LC_CTYPE: 'zh_CN.UTF-8',
         LSCOLORS: 'Gxfxcxdxbxegedabagacad',
         NVM_DIR: '/Users/tugenhua/.nvm',
         NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
         NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
         NVM_RC_VERSION: '',
         MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
         NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
         NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
         _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
      pid: 14034,
      features: 
       { debug: false,
         uv: true,
         ipv6: true,
         tls_npn: true,
         tls_sni: true,
         tls_ocsp: true,
         tls: true },
      _needImmediateCallback: false,
      config: {},
      nextTick: [Function: nextTick],
      _tickCallback: [Function: _tickCallback],
      _tickDomainCallback: [Function: _tickDomainCallback],
      stdout: [Getter],
      stderr: [Getter],
      stdin: [Getter],
      openStdin: [Function],
      exit: [Function],
      kill: [Function],
      mainModule: 
       Module {
         id: '.',
         exports: {},
         parent: null,
         filename: '/Users/tugenhua/个人demo/process.js',
         loaded: false,
         children: [],
         paths: 
          [ '/Users/tugenhua/个人demo/node_modules',
            '/Users/tugenhua/node_modules',
            '/Users/node_modules',
            '/node_modules' ] } }
    

    如上就可以看到 process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。

    二、process.env.NODE_ENV该如何配置?

    process.env属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据,那么我们如何配置它呢?

    方法1:配置环境变量
    • windows环境配置如下:
    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在 
    set NODE_ENV 
    
    #如果不存在则添加环境变量 
    set NODE_ENV=production 
    
    #环境变量追加值 set 变量名=%变量名%;变量内容 
    set path=%path%;C:\web;C:\Tools 
    
    #某些时候需要删除环境变量 
    set NODE_ENV=
    
    • Linux配置(mac系统环境也属于这个)如下:
    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在
    echo $NODE_ENV
    
    #如果不存在则添加环境变量
    export NODE_ENV=production
    
    #环境变量追加值
    export path=$path:/home/download:/usr/local/
    
    #某些时候需要删除环境变量
    unset NODE_ENV
    
    #某些时候需要显示所有的环境变量
    env
    

    如下查看环境变量,添加环境变量,删除环境变量操作如下:

    在这里插入图片描述
    在这里插入图片描述

    注意:如果NODE_ENV设置为production后,所有的项目都会处于正式环境中。
    此时使用命令npm install下载依赖包时,只会把package.json中的dependencies依赖项下载下来,对于devDependencies中的依赖包是下载不下来的。因此需要使用上面的命令unset NODE_ENV删除刚刚设置的环境变量。

    方法2:使用DefinePlugin

    DefinePlugin官网的解释是:DefinePlugin允许我们创建全局变量,可以在编译时进行设置。

    因此可以使用该属性来设置全局变量来区分开发环境和正式环境,这就是DefinePlugin的基本功能。

    我们可以在webpack.config.js中添加如下代码配置全局变量信息,因为当webpack进行编译的时候会全局设置变量,如下代码:

    module.exports = {
      plugins: [
        // 设置环境变量信息
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(true),
          VERSION: JSON.stringify('5fa3b9'),
          BROWSER_SUPPORTS_HTML5: true,
          TWO: '1+1',
          'typeof window': JSON.stringify('object'),
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
          }
        })
      ]
    }
    

    package.json中的打包配置如下:

    "scripts": {
      "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    },
    

    这样配置完成后,为了验证一下是否是全局变量,运行npm run dev打包后,在我们项目入口js文件中打印下即可:

    console.log(process.env.NODE_ENV); // 打印结果为 'development' 
    

    发现process.env.NODE_ENV已经被作为全局变量打印出来了,因此在项目打包中为了区分开发环境和正式环境我们可以使用这种方法。

    关于cross-env

    • 什么是cross-env呢?
      它是运行跨平台设置和使用环境变量的脚本。

    • 它的作用是啥?
      当我们使用DefinePlugin这种方法设置NODE_ENV时,大多数windows命令会提示将会阻塞或者异常,或者windows不支持NODE_ENV=development的这样的设置方式,会报错。因此cross-env出现了。我们可以使用cross-env命令来实现全开发平台的兼容。
      要使用该命令的话,我们首先需要在我们的项目中安装该命令:

    npm install --save-dev cross-env
    

    在package.json中的scripts命令如下:

    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    }
    

    三、vue-cli3.0中的process.env.NODE_ENV

    使用vue-cli3构建的项目就简单多了,因为vue-cli3使用上述的DefinePlugin方式帮你把process.env.NODE_ENV配置好了,我们不需要再自己去配置。

    它自带了三种模式:

    • development:在vue-cli-service serve下,即开发环境使用
    • production:在vue-cli-service build和vue-cli-service test:e2e下,即正式环境使用
    • test: 在vue-cli-service test:unit下使用

    在package.json中的scripts命令如下

    {
      "name": "",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "vue-cli-service serve", //本地开发运行,会把process.env.NODE_ENV设置为'development'
        "build": "vue-cli-service build", //默认打包模式,会把process.env.NODE_ENV设置为'production'
      },
      "dependencies": {
      }
    }
    

    参考:
    process.env.NODE_ENV详解
    理解webpack之process.env.NODE_ENV详解(十八)
    根据process.env.NODE_ENV配置本地/测试/生产环境的接口请求地址

    展开全文
  • Vue中process.env.NODE_ENV详解

    千次阅读 多人点赞 2021-09-03 10:11:36
    一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习vue.config.js文件,发现一行,甚是费解。 process.env.NODE_ENV 查阅资料后,发现武林众功法中对process.env.NODE_ENV没有解释的太清楚,遂决定以...

    一文弄懂如何在 Vue 中配置 process.env.NODE_ENV

    最近在研习 vue.config.js 文件,发现一行,甚是费解。

    process.env.NODE_ENV

    查阅资料后,发现武林众功法中对 process.env.NODE_ENV 没有解释的太清楚,遂决定以一功法记录。

    process.env 为何物

    言归正传。 process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。

     

    而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境(生产环境,开发环境)。默认是没有这个环境变量的,需要自己手动配置。不同系统有不同的环境变量配置方式,在这里就不多加赘述。

    NODE_ENV 与 Vue

    NODE_ENV 变量只能在系统中配置吗?其实不然。在 Vue 项目中, Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文档说明了这个问题。

     

    也就是说,在 Vue 中, NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后,运行 Vue CLI 指令( npm run dev(serve) ,npm run build )时,就会将该模式下的NODE_ENV载入其中了。而这些命令,都有自己的默认模式:

    • npm run dev(serve) ,其实是运行了 vue-cli service serve ,默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
    • npm run build ,其实运行了 vue-cli service build ,默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

    修改方式如下,以键值对的方式:

     

    除了以上的修改方式外,也可以在命令后直接使用 --mode 参数手动指定模式。当然,每个模式配置的变量也不只有 NODE_ENV , 也可以通过配置其他的变量简化工作流程。

    模式的应用

    有了模式的概念,就可以根据不同的环境配置模式,就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境, publicPath参数 (部署应用包时的基本 URL) 可能不同。遇到这种情况就可以在 vue.config.js 文件中,将 publicPath 参数设置为:

    publicPath: process.env.BASE_URL

    设置之后,再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了,这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。

    Tips: 即使不是生产环境,也可以将模式设置为 production ,这样可以获得 webpack 默认的打包优化。

    process.env.NODE_ENV详解 

    一、 process.env.NODE_ENV是什么?

    在node中,有全局变量process表示的是当前的node进程。
    process.env包含着关于系统环境的信息,但是process.env中并不存在NODE_ENV这个东西。

    NODE_ENV是一个用户自定义的变量,在webpack中它的用途是判断生产环境或开发环境

    为了查看 process的基本信息,我们可以在文件夹中 新建一个process.js文件,在里面加一句代码console.log(process);然后进入该文件夹,执行node process.js可以在命令行中打印如下信息:

    $ node process.js
    process {
      title: 'node',
      version: 'v4.4.4',
      moduleLoadList: 
       [....],
      versions: 
       { http_parser: '2.5.2',
         node: '4.4.4',
         v8: '4.5.103.35',
         uv: '1.8.0',
         zlib: '1.2.8',
         ares: '1.10.1-DEV',
         icu: '56.1',
         modules: '46',
         openssl: '1.0.2h' },
      arch: 'x64',
      platform: 'darwin',
      release: 
       { name: 'node',
         lts: 'Argon',
         sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
         headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
      argv: 
       [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         '/Users/tugenhua/个人demo/process.js' ],
      execArgv: [],
      env: 
       { TERM_PROGRAM: 'Apple_Terminal',
         SHELL: '/bin/zsh',
         TERM: 'xterm-256color',
         TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
         Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
         TERM_PROGRAM_VERSION: '404',
         TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
         USER: 'tugenhua',
         SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
         PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
         PWD: '/Users/tugenhua/个人demo',
         LANG: 'zh_CN.UTF-8',
         XPC_FLAGS: '0x0',
         XPC_SERVICE_NAME: '0',
         SHLVL: '1',
         HOME: '/Users/tugenhua',
         LOGNAME: 'tugenhua',
         SECURITYSESSIONID: '186a8',
         OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
         ZSH: '/Users/tugenhua/.oh-my-zsh',
         PAGER: 'less',
         LESS: '-R',
         LC_CTYPE: 'zh_CN.UTF-8',
         LSCOLORS: 'Gxfxcxdxbxegedabagacad',
         NVM_DIR: '/Users/tugenhua/.nvm',
         NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
         NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
         NVM_RC_VERSION: '',
         MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
         NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
         NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
         _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
         __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
      pid: 14034,
      features: 
       { debug: false,
         uv: true,
         ipv6: true,
         tls_npn: true,
         tls_sni: true,
         tls_ocsp: true,
         tls: true },
      _needImmediateCallback: false,
      config: {},
      nextTick: [Function: nextTick],
      _tickCallback: [Function: _tickCallback],
      _tickDomainCallback: [Function: _tickDomainCallback],
      stdout: [Getter],
      stderr: [Getter],
      stdin: [Getter],
      openStdin: [Function],
      exit: [Function],
      kill: [Function],
      mainModule: 
       Module {
         id: '.',
         exports: {},
         parent: null,
         filename: '/Users/tugenhua/个人demo/process.js',
         loaded: false,
         children: [],
         paths: 
          [ '/Users/tugenhua/个人demo/node_modules',
            '/Users/tugenhua/node_modules',
            '/Users/node_modules',
            '/node_modules' ] } }
    

    如上就可以看到 process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。

    二、process.env.NODE_ENV该如何配置?

    process.env属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据,那么我们如何配置它呢?

    方法1:配置环境变量

    • windows环境配置如下:

    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在 
    set NODE_ENV 
    
    #如果不存在则添加环境变量 
    set NODE_ENV=production 
    
    #环境变量追加值 set 变量名=%变量名%;变量内容 
    set path=%path%;C:\web;C:\Tools 
    
    #某些时候需要删除环境变量 
    set NODE_ENV=
    
    • Linux配置(mac系统环境也属于这个)如下:

    #node中常用的到的环境变量是NODE_ENV,首先查看是否存在
    echo $NODE_ENV
    
    #如果不存在则添加环境变量
    export NODE_ENV=production
    
    #环境变量追加值
    export path=$path:/home/download:/usr/local/
    
    #某些时候需要删除环境变量
    unset NODE_ENV
    
    #某些时候需要显示所有的环境变量
    env
    

    注意:如果NODE_ENV设置为production后,所有的项目都会处于正式环境中。
    此时使用命令npm install下载依赖包时,只会把package.json中的dependencies依赖项下载下来,对于devDependencies中的依赖包是下载不下来的。因此需要使用上面的命令unset NODE_ENV删除刚刚设置的环境变量。

    方法2:使用DefinePlugin

    DefinePlugin官网的解释是:DefinePlugin允许我们创建全局变量,可以在编译时进行设置。

    因此可以使用该属性来设置全局变量来区分开发环境和正式环境,这就是DefinePlugin的基本功能。

    我们可以在webpack.config.js中添加如下代码配置全局变量信息,因为当webpack进行编译的时候会全局设置变量,如下代码:

    module.exports = {
      plugins: [
        // 设置环境变量信息
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(true),
          VERSION: JSON.stringify('5fa3b9'),
          BROWSER_SUPPORTS_HTML5: true,
          TWO: '1+1',
          'typeof window': JSON.stringify('object'),
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
          }
        })
      ]
    }
    

    package.json中的打包配置如下:

    "scripts": {
      "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    },
    

    这样配置完成后,为了验证一下是否是全局变量,运行npm run dev打包后,在我们项目入口js文件中打印下即可:

    console.log(process.env.NODE_ENV); // 打印结果为 'development' 
    

    发现process.env.NODE_ENV已经被作为全局变量打印出来了,因此在项目打包中为了区分开发环境和正式环境我们可以使用这种方法。

    关于cross-env

    • 什么是cross-env呢?
      它是运行跨平台设置和使用环境变量的脚本。

    • 它的作用是啥?
      当我们使用DefinePlugin这种方法设置NODE_ENV时,大多数windows命令会提示将会阻塞或者异常,或者windows不支持NODE_ENV=development的这样的设置方式,会报错。因此cross-env出现了。我们可以使用cross-env命令来实现全开发平台的兼容。
      要使用该命令的话,我们首先需要在我们的项目中安装该命令:

    npm install --save-dev cross-env
    

    在package.json中的scripts命令如下:

    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
      "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
      "build:dll": "webpack --config webpack.dll.config.js"
    }
    

    三、vue-cli3.0中的process.env.NODE_ENV

    使用vue-cli3构建的项目就简单多了,因为vue-cli3使用上述的DefinePlugin方式帮你把process.env.NODE_ENV配置好了,我们不需要再自己去配置。
    它自带了三种模式:

    development:在vue-cli-service serve下,即开发环境使用
    production:在vue-cli-service build和vue-cli-service test:e2e下,即正式环境使用
    test: 在vue-cli-service test:unit下使用

    在package.json中的scripts命令如下

    {
      "name": "",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "vue-cli-service serve", //本地开发运行,会把process.env.NODE_ENV设置为'development'
        "build": "vue-cli-service build", //默认打包模式,会把process.env.NODE_ENV设置为'production'
      },
      "dependencies": {
      }
    }
    

    参考自:https://www.cnblogs.com/tugenhua0707/p/9780621.html



    作者:西瓜鱼仔
    链接:https://www.jianshu.com/p/f4638f5df1c7
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

     转载于:https://www.pianshen.com/article/18571709067/

    展开全文
  • 折腾了一下午,查询了各种资料这才把这Node环境变量process.env给弄明白。 下面这就做个问题解决的记录。希望能对这个不明白的人有所帮助。话不多说了,来一起看看详细的介绍吧。 Node环境变量 首先,咱们在做react...
  • 此nstrap模块使用process.env.NODE_ENV提供当前环境。 (可选)您可以传递选项以定义默认环境。 安装 npm i --save nstrap-environment 例子 var bootstrap = require ( 'nstrap' ) ( ) ; bootstrap . add ( ...
  • const { NODE_ENV , NODE_PORT } = process . env ; console . log ( NODE_ENV ) ; 更糟:有时,这样的替代: if ( process . env . NODE_ENV === 'production' ) { ...将扩展为: if ( 'p
  • process.env.NODE_ENV设置生产环境模式

    万次阅读 多人点赞 2020-06-30 07:11:37
    最近系统接入了公司的单点登录,为了登陆成功后再跳回系统的主页面,又申请了测试和沙箱的域名(之前都是直接用IP登的),本地开发是配置的host。...这个时候,process.env就跳入了脑海。 扒一扒pr
  • 借助于 process.env.NODE_ENV 可以使我们区分开发环境 查看环境变量 1.安装nodejs 2.通过终端(cmd),输入node,进入编辑模式 3.输入process+回车, 显示进程 4.输入process.env+回车,显示 当前环境(environment)...
  • webpack中的process.env.NODE_ENV

    千次阅读 2022-04-14 21:28:16
    2.process.env.NODE_ENV 是什么? 1.这个变量不是process.env本来就有的,是通过设置得到的; 2.通过这个变量可以判断我们环境是开发环境还是生成环境。 3.配置process.env.NODE_ENV (1)webpack4
  • 根据process.env.NODE_ENV值顺序加载.env文件。 壳 .env。{environment} .local .env。{environment} .env.local .env 如果设置了环境变量,则之后加载的任何文件都不会覆盖它。 用法 在构建过程或应用中尽快...
  • process.env.NODE_ENV 用法

    2022-01-13 14:57:26
    npm run dev 的时候,webpack会将process.env.NODE_ENV=‘development’; npm run build 的时候,webpack会将process.env.NODE_ENV=‘production’; 但是实际开发过程中如果有多个环境,那么我们可以自己进行配置...
  • 谈谈 process.env.NODE_ENV

    千次阅读 2020-08-09 19:16:27
    一、process.env.NODE_ENV 介绍 在 node 中,全局变量 process 表示的是当前的 node 进程。process.env 包含着有关系统环境的信息,但是 process.env 中并不存在 NODE_ENV 这个东西。NODE_ENV 是用户一个自定义的...
  • process.env.NODE_ENV配置

    2021-12-07 10:43:27
    多环境配置 “scripts”: { “serve”: “vue-cli-service serve --open --mode dev”, “build:test”: “vue-cli-service build --mode beta”, ...NODE_ENV = production //设置生产环境process.env.NODE_ENV VU
  • 如何设置process.env.NODE_ENV

    千次阅读 2021-03-29 23:09:11
    NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境(dev-vs-prod)下,服务器工具、构建脚本和客户端 library 的行为。...if(process.env.NODE_ENV === 'development'){
  • 注意: 其实通过改变process.env.NODE_ENV值区分打包环境是有问题的,因为webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样; 为了消除这种差异,可以使用其他变量...
  • vue 动态环境设置,process.env. NODE_ENV

    千次阅读 2022-04-19 06:35:44
    vue 动态环境设置 const Config = { projectMode: process.env.NODE ENV === "production" // 是否生三模式(pjf模式) …… }
  • Processnode启动之后的环境变量,首先说一个大前提,程序跑起来的环境也就是那个文件夹下,或者说下载好node环境之后,在跑起来的项目的那个地方可以用nodeprocess这个变量读取node的环境,这是一个node的大环境...
  • Node 环境变量 process.env.NODE_ENV 之webpack应用 Node 环境变量 process.env.NODE_ENV 之webpack应用 进入主题 一、接下来进入主题,开始配置 webpack.config.js: 二、通过webpack -p参数控制 三、通过 ...
  • 最近在写前端的时候发现了一句代码 process.env.NODE_ENV === 'development' 代码的意思就是如果是开发环境就执行以下的操作 但是我找了半天也没找到哪里设置的NODE_ENV 满头的疑惑 后来终于 皇天不负有心人 终于查...
  • process.env这个变量。我们可以从Nodejs的文档中知道,它是一个nodejs的全局环境变量。其中存放着许多nodejs运行环境相关的值,可以查看nodejs文档。 其中有一个叫做NODE_ENV的变量,它很特殊。我们在用react,vue这些...
  • 详解process.env.NODE_ENV

    千次阅读 2021-05-18 14:43:30
    一、 简述process.env.NODE_ENV是什么? process 对象是一个全局变量,提供了有关当前 Node.js 进程的信息并对其进行控制。 作为全局变量,它始终可供 Node.js 应用程序使用,无需使用 require()。 它也可以使用 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,319
精华内容 24,127
关键字:

process.env.node_env

友情链接: TT1.rar