vue项目中根据Node.js中环境变量process.env 设置不同接口

了解process

http://nodejs.cn/api/process.html

了解process_env

http://nodejs.cn/api/process.html#process_process_env

vue项目应用

• 步骤
  • 在根目录下创建.env文件，内容如下。（production生产环境）

    NODE_ENV = 'production'
    VUE_APP_FLAG = 'pro'
    

  • 在根目录下创建.env.test文件,（测试环境）

    NODE_ENV = 'production'
    VUE_APP_FLAG = 'test'
    outputDir = test 
    

  • 如下图
    
• package.json中scripts中添加 --mode test 是测试环境下用的
  
• 在main.js中判断当前环境需要加载的接口域名

	 /*判断生产环境和开发环境*/
	if (process.env.NODE_ENV === 'production') {
	  /*根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
	  if (process.env.VUE_APP_FLAG == 'pro') {
	      //production 生产环境
	      baseURL = 'http://api.xinggeyun.com';
	  } else {
	      //test 测试环境
	      baseURL = 'http://192.168.0.152:8103';
	  }
	} else {
	  //dev 开发环境
	  baseURL = 'http://192.168.0.152:8102';
	}