일부 상수를 수행 할 환경 변수의 정의를 사용하여 - VUE의 개발에 몇 가지 사소한 문제를 사용하여

1, 중앙 집중화 된 환경 구성 :

(1) VUE-CLI 기본적으로 사용, 당신은 config 폴더에있는 구성 파일을 작성해야 무엇을 다룰 필요가 없습니다 :

module.exports = 병합 (prodEnv { 
  NODE_ENV : ' "발달"' , 
    BASE_URL : ' "/ 중량"' 
})

따옴표 내부 사이의 관계는 다음 웹팩 플러그인 구성에 정의됨을 유의 : webpack.define.plugin 단계;

webpack.dev.conf.js

플러그인이 값을 취할 수 있습니다 필요로하는 곳에 직접 process.env.BASE_URL를 컴파일시 전역 상수 변수를 정의 사용합니다;

(2) 이것은 JS 첨가 환경 변수를 제어하는 ​​방법이다 :

package.json

"스크립트" : {
     "DEV": "크로스 ENV NODE_ENV = 개발 웹팩-DEV-서버" ,
     "구축": "크로스 ENV NODE_ENV = 생산 웹팩 --env.minimize" 
  },

당신은 도메인 이름, 변수 등 일정의 일부 필요 같은 환경 변수에 의해 서로 다른 환경에 다른 구성을 지정할 수 있습니다;이 방법은 환경 변수에 선언 크로스 ENV의 JS가 도움이되지만 결국 webpack.define 필수 플러그인 정의 .plugin, 플러그인에서 직접 값을 취할 수 있습니다 필요로하는 곳에 process.env.BASE_URL를 컴파일시 전역 상수 변수를 정의 사용합니다;

 

일반적인 연습 :

중앙 관리를 정의합니다 :

그것은 몇 가지 처리가 필요이 정의 후 음, 직렬화 :

ENV하자;
스위치 (process.env.NODE_ENV) {
   경우 "생산" : 
    ENV = 요구 ( "./ prod.env" );
    휴식 ;
  케이스 "production.test" : 
    ENV의 =는 ( "./ prod.test.env"요구 );
    휴식 ;
  케이스 "production.test2" : 
    ENV = 요구 ( "./ prod.test2.env" );
    휴식 ;
  기본 : 
    ENV의 =은 ( "./ dev.env"필요 );
    휴식 ; 

} 

Object.keys (ENV) .forEach (_key => = JSON.stringify (ENV [_key]) 
}); 

module.exports = ENV;

 

 JS 크로스 ENV NODE_ENV = 개발 파일 소요되는 구성을 결정하고, 마지막으로 유도 ENV webpack.define.plugin 정의 된 장소를 사용하는 직접적 전역 상수 변수로 변환; 그래서 이 방법으로 크로스 ENV 모듈을 설치해야합니다;