vue cli 4 에서 환경 변수 와 패턴 예시 상세 설명

본 고 는 vue cli 4 에서 환경 변수 와 모델 예 시 를 상세 하 게 설명 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
공식 문서
환경 변수
환경 변수 파일 은 환경 변수의 키 쌍 만 포함 합 니 다:

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

주의:

NODE_ENV-"development","production","test"또는 사용자 정의 값 입 니 다.구체 적 인 값 은 응용 운행 모델

에 달 려 있다.

BASE_URL-vue.config.js 의 publicPath 옵션 과 일치 합 니 다.즉,응용 프로그램 이 배치 할 기본 경로

입 니 다.

NODE 빼 고ENV 와 BASEURL,다른 환경 변 수 는 반드시 VUEAPP_ 시작

항목 에서 사용:process.env.환경 변수 명,eg:VUEAPP_BASE_URL

패턴
모델 은 Vue CLI 프로젝트 의 중요 한 개념 이다.기본적으로 Vue CLI 항목 은 세 가지 모드 가 있 습 니 다.

development 모드 는 vue-cli-service serve

에 사 용 됩 니 다.

production 모델 은 vue-cli-service build 와 vue-cli-service test:e2e

에 사용 된다.

test 모드 는 vue-cli-service test:unit

에 사 용 됩 니 다.
주의 점:

한 모델 은 여러 환경 변 수 를 포함 할 수 있다

모든 모드 에서 환경 변 수 를 NODEENV 의 값 을 패턴 의 이름 으로 설정

.env 파일 에 접 두 사 를 추가 하여 특정한 모드 에서 특유 한 환경 변 수 를 설정 할 수 있 습 니 다

특정한 모델 을 위 한 환경 파일(예 를 들 어 env.production)은 일반 환경 파일(예 를 들 어 env)보다 더 높 은 우선 순위

를 가 집 니 다.

또한 Vue CLI 가 시 작 될 때 이미 존재 하 는 환경 변 수 는 최고 우선 순 위 를 가지 고 있 으 며.env 파일 에 덮어 쓰 이지 않 습 니 다

.env        #           
.env.local     #           ，    git   
.env.[mode]     #            ，     .env .env.local
.env.[mode].local  #            ，    git   ，     .env .env.local

예:서로 다른 모드 에서 axios 에 서로 다른 baseUrl 을 지정 합 니 다.
development 모드 의 환경 변수 파일 을 만 들 고 프로젝트 루트 디 렉 터 리 에 새.env.development 파일 을 만 듭 니 다.

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

production 모드 의 환경 변수 파일 을 만 들 고 프로젝트 루트 디 렉 터 리 에 새.env.production 파일 을 만 듭 니 다.

NODE_ENV=production
VUE_APP_BASE_URL=/

src 디 렉 터 리 에서 main.js 파일 에서 환경 변 수 를 사용 합 니 다.

import Vue from 'vue'
import App from './App.vue'

//   axios
import axios from 'axios'
//        ，      
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// axios   
axios.interceptors.request.use(config => {
 //       ，  Token   Authorization  
 config.headers.Authorization = window.sessionStorage.getItem('token')
 //      return config
 return config
})
//    vue
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

다른 vue 구성 요소 에서 도 인쇄 할 수 있 습 니 다.

console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)

실행 항목

npm run serve

예:사용자 정의 모드
fat 모드 사용자 정의
프로젝트 루트 디 렉 터 리 에 환경 변수 파일 을 새로 만 듭 니 다.env.fat

NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/

루트 디 렉 터 리 아래 package.json 에 스 크 립 트 명령 추가

{
 "name": "vue_shop",
 "version": "0.1.0",
 "private": true,
 "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  //           ，  --mode     fat
  "fat": "vue-cli-service serve --mode fat",
  "lint": "vue-cli-service lint"
 },
 "dependencies": {
  "axios": "^0.19.2",
  "core-js": "^3.4.4",
  "echarts": "^4.6.0",
  "element-ui": "^2.4.5",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3"
 },
 "devDependencies": {
  "@vue/cli-plugin-babel": "^4.1.0",
  "@vue/cli-plugin-eslint": "^4.1.0",
  "@vue/cli-plugin-router": "^4.1.0",
  "@vue/cli-service": "^4.1.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.3",
  "babel-plugin-component": "^1.1.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "less": "^3.10.3",
  "less-loader": "^5.0.0",
  "vue-cli-plugin-element": "^1.0.1",
  "vue-template-compiler": "^2.6.10"
 }
}

실행 명령

npm run fat

이때 항목 에서 읽 은 것 은 fat 모드 의 환경 변수 입 니 다.
vue cli 4 에서 환경 변수 와 모델 예제 에 대한 상세 한 설명 을 담 은 이 글 은 여기까지 입 니 다.vue cli 4 환경 변수 와 모델 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!