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';
	}