vue-cli中process.env.NODE_ENV

2017-10-08

看前面vue-cli讲解的文章,对process.env.NODE_ENV,一直不理解是怎么设置的,怎么就变成production或者development

// webpack.base.config.js
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

通过看了不同的文章,大概有所了解.

请参考process.env

改变运行脚本的环境变量

业务代码如何判断生产/开发环境

DefinePlugin中的淫技巧

process.env

process对象用于处理与当前进程相关的事情，它是一个全局对象，可以在任何地方直接访问到它而无需引入额外模块。它是 EventEmitter 的一个实例。

process.env 获取当前系统环境信息的对象，常规可以用来进一步获取环境变量、用户名等系统信息：

console.log(process.env);
console.log('username: ' + process.env.USERNAME);
console.log('PATH: ' + process.env.PATH);

webpack 开发和生产的区别

开发环境(development)和生产环境(production)的构建目标差异很大。

在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。

而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。

由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

分别为

webpack.config.js

webpack.dev.js

webpack.production.js

如何区分生产环境还是开发环境

引入process.env，这样就可以在业务代码中靠process.env.NODE_ENV来判断.

在webpack.base.config.js区分process.env.NODE_ENV来决定设置webpack配置为开发还是生产.

// webpack.base.config.js
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

process.env.NODE_ENV如何设置

因为process是nodejs全局变量,可以通过命令行设置

export NODE_ENV = production && webpack

export NODE_ENV = dev && webpack

也可以通过package.json设置

{
  "scripts": {
    "dev": "export NODE_ENV=dev&&webpack  --progress --colors",
    "production": "export NODE_ENV=production&&webpack  --progress --colors",
  },

也可以借助webpack.DefinePlugin插件,在代码里面设置,如

    //webpack.dev.js
 plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),

 //config/index.js
 dev: {
     env: require('./dev.env'),
     port: 8080,

//config/dev.env.js
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

但是在build.js中 process.env.NODE_ENV = ‘production’ ,不知道这个和webpack.prod.js里面的有什么区别.