Vue项目中环境变量的配置

看项目的时候因为不懂发现的问题

在生产环境和开发环境的时候，有些变量是不一样的，比如接口，打包的时候就需要切换。

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就让我非常疑惑，不知道是在哪里配置的。
其实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变量。
例如在接口js中

const url = process.env.NODE_ENV === 'development' ? 'http://xxxxx' : 'http://xxxxx'

此外，process.env.NODE_ENV变量的值可以在
/config/dev.env.js，/config/prod.env.js两个文件中设置（这两个文件就是针对生产环境和发布环境设置不同参数的文件），然后require到webpack.dev.conf.js，webpack.prod.conf.js中去。