Vue CLI 에서 모드 와 환경 변수의 깊이 있 는 설명
실제 프로젝트 의 개발 에서 우 리 는 프로젝트 의 개발 단계,테스트 단계 와 최종 출시 단 계 를 겪 습 니 다.모든 단계 에서 프로젝트 코드 에 대한 요구 가 다 를 수 있 습 니 다.그러면 우 리 는 어떻게 여 유 롭 게 서로 다른 단계 에서 우리 의 프로젝트 를 서로 다른 효 과 를 나타 내 고 서로 다른 기능 을 사용 할 수 있 습 니까?
이곳 은 환경의 개념 을 도입 해 야 한다공식 문서 의 패턴 과 환경 변수 설명
일반적으로 한 항목 에 다음 과 같은 세 가지 환경 이 있다.
4.567917.개발 환경(개발 단계,현지 개발 버 전 은 보통 디 버 깅 도구 나 추가 적 인 보조 기능 을 사용 합 니 다)4.567917.테스트 환경(테스트 단계,온라인 전 버 전,일부 bug 의 복 구 를 제외 하고 온라인 버 전과 큰 차이 가 없 음)4.567917.생산 환경(온라인 단계,정식 적 으로 대외 적 으로 발표 한 버 전 은 보통 최적화 되 고 오류 보 고 를 끄 는 것);
개발 자로 서 우 리 는 모든 환경 에 대해 서로 다른 코드 를 작성 하고 이 코드 들 이 정확 한 환경 에서 실 행 될 수 있 도록 해 야 할 수도 있 습 니 다.그러면 우 리 는 코드 에서 프로젝트 가 처 한 환경 을 판단 하고 서로 다른 코드 를 동시에 실행 해 야 합 니까?이것 은 우리 가 정확 한 환경 설정 과 관 리 를 해 야 한다.
1.프로필
정확 한 설정 환경 은 먼저 우리 가 서로 다른 환경 설정 간 의 관 계 를 인식 해 야 한다.그림 과 같다.
우 리 는 위의 그림 에서 모든 환경 이 서로 다른 설정 을 가지 고 있 음 을 알 수 있 습 니 다.또한 그들 은 교 집합 부분 도 존재 합 니 다.교 집합 은 바로 그들 이 모두 가지 고 있 는 설정 항목 입 니 다.그러면 Vue 에서 우 리 는 어떻게 처리 해 야 합 니까?
루트 디 렉 터 리 에 다음 형식의 파일 을 만들어 서 서로 다른 환경 에서 변 수 를 설정 할 수 있 습 니 다.
.env # 모든 환경 에서 불 러 오기
.env.local # 모든 환경 에서 불 러 오지 만 git 에서 무시 합 니 다.
.env.[mode] # 지정 한 모드 에서 만 불 러 옵 니 다.예 를 들 어:env.development,.env.production
.env.[mode].local # 지정 한 모드 에서 만 불 러 오지 만 git 에서 무시 합 니 다.
예 를 들 어'env.development'라 는 파일 을 만 듭 니 다.이 파일 은 development 환경 에서 만 불 러 온 다 는 것 을 보 여 줍 니 다.
이 파일 에서 다음 키 값 이 맞 는 변 수 를 설정 할 수 있 습 니 다.
#
NODE_ENV=development
VUE_APP_API_BASE_URL=https://www.baidu.com/
// vue.config.js
console.log(process.env.NODE_ENV); // development（ ）
수정 이 필요 하 다 면 package.json 의 serve 스 크 립 트 명령 을:
// package.json
"scripts": {
"serve": "vue-cli-service serve --mode stage",
},
해당 프로필 을 찾 지 못 하면 기본 환경 development 를 사용 합 니 다.vue-cli-service build 는 기본 환경 production 을 사용 합 니 다.
.env 파일 을 다시 만 들 면 중복 변 수 를 다시 설정 하지만 값 이 다 릅 니 다.
#
NODE_ENV=ENV
VUE_APP_API_BASE_URL=http://www.soso.com/
정 답 은 development.
하지만.env.development.local 파일 에서 위 처럼 설정 하면 답 은 ENV 입 니 다.
그래서.env[mode].local 은.env[mode]아래 의 같은 설정 을 덮어 씁 니 다.
같은 이치.env.local 은.env 아래 의 같은 설정 을 덮어 씁 니 다.
이 를 통 해 같은 설정 항목 의 가중치:env[mode].local>.env[mode]>.env.local>.env.
메모:같은 설정 항목 의 권한 이 큰 덮어 쓰 기 를 제외 하고 다른 설정 항목 은 자바 script 의 Object.assign 과 같은 용법 으로 합 쳐 집 니 다.
2.환경 주입
위 설정 파일 의 생 성 을 통 해 프로젝트 환경 을 명령 행 형식 으로 설정 하고 자 유 롭 게 전환 할 수 있 습 니 다.그러나 주의:Vue 의 전단 코드 에 인쇄 된 process.env 는 vue.config.js 와 출력 이 다 를 수 있 습 니 다.웹 팩 은 DefinePlugin 내장 플러그 인 을 통 해 process.env 를 클 라 이언 트 코드 에 주입 하 는 지식 을 보급 해 야 합 니 다.
// webpack
{
...
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
],
...
}
예 를 들 어 가중치 가 가장 높 은.env.development.local 파일 에 기록 합 니 다.
#
NODE_ENV=developmentLocal
VUE_APP_API_BASE_URL=https://www.baidu.com/
NAME=javaScript
{
...
npm_config_ignore_scripts: '',
npm_config_version_git_sign: '',
npm_config_ignore_optional: '',
npm_config_init_version: '1.0.0',
npm_package_dependencies_vue_router: '^3.0.1',
npm_config_version_tag_prefix: 'v',
npm_node_execpath: '/usr/local/bin/node',
NODE_ENV: 'developmentLocal',
VUE_APP_API_BASE_URL: 'https://www.baidu.com/',
NAME: 'javaScript',
BABEL_ENV: 'development',
...
}
{
BASE_URL: "/",
NODE_ENV: "developmentLocal",
VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}
3.추가 설정
이상 저 희 는 새 프로필 을 통 해 프로젝트 의 서로 다른 환경 에 서로 다른 변 수 를 설정 하여 프로젝트 의 기본 적 인 환경 관 리 를 실현 할 수 있 습 니 다.그러나 env 와 같은 프로필 의 매개 변 수 는 현재 정적 값 만 지원 하고 동적 매개 변 수 를 사용 할 수 없 으 며 특정한 상황 에서 특정한 수 요 를 실현 할 수 없습니다.
이 때 루트 디 렉 터 리 에 config 폴 더 를 새로 만들어 서 추가 프로필 을 저장 할 수 있 습 니 다.
/* index.js */
//
const com = {
IP: JSON.stringify('xxx')
};
module.exports = {
//
dev: {
env: {
TYPE: JSON.stringify('dev'),
...com
}
},
//
build: {
env: {
TYPE: JSON.stringify('prod'),
...com
}
}
}
현재 vue.config.js 에 이 변 수 를 주입 하려 면 chainWebpack 을 사용 하여 DefinePlugin 의 값 을 수정 할 수 있 습 니 다.
/* vue.config.js */
const configs = require('./config');
// merge
const merge = require('webpack-merge');
//
const cfg = process.env.NODE_ENV === 'production' ? configs.build.env : configs.dev.env;
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(args => {
let name = 'process.env';
// merge
args[0][name] = merge(args[0][name], cfg);
return args
})
},
}
{
BASE_URL: "/",
IP: "xxx",
NODE_ENV: "developmentLocal",
TYPE: "dev",
VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}
속성 에 접근 하려 면 process.env.xxx 를 사용 하 십시오.
<script>
export default {
data() {
return {
BASEURL:process.env,
}
},
mounted(){
console.log(this.BASEURL.VUE_APP_API_BASE_URL) // https://www.baidu.com/
}
}
</script>
// axios
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 5000
})
환경의 배치 와 관 리 는 프로젝트 의 구축 에 중요 한 역할 을 했다.프로젝트 에 서로 다른 환경 을 배치 하면 개발 의 유연성 을 증가 하고 프로그램의 확장 성 을 향상 시 킬 수 있 을 뿐만 아니 라 우리 가 프로젝트 가 서로 다른 환경 에서 의 운영 체 제 를 이해 하고 분석 하 며 전체적인 관념 을 구축 하 는 데 도 도움 이 된다.
Vue CLI 의 모드 와 환경 변수 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue CLI 모드 와 환경 변수 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
