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中去。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,699评论 0 0
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,733评论 0 16
  • 大卫:【代上29:14】“我算什么,我的民算什么,竟能如此乐意奉献?因为万物都从你而来,我们把从你而得的献给你!
    李先生_bcaf阅读 324评论 0 0
  • 初接触彩铅画 第一根上色,和第二三根的起型已经完成。 第二根上色已完成。 这是三根香蕉上色完结。 自己总结: 第三...
    沙叮熊熊阅读 711评论 4 7
  • 用理工科的思维看待世界! 一、文科思维 真实的世界中人们更容易被情感,细节,情境,画面感所误导。无法做出正确...
    虎痞子阅读 377评论 0 3