이번에는 vue-cli 3.0.x 사용단계에 대한 자세한 설명을 가져왔습니다. vue-cli 3.0.x 사용시 주의사항은 무엇인가요?
1. 공식 홈페이지 정보
기술을 배울 때는 항상 공식 홈페이지 정보를 확인하세요. 그곳의 정보가 가장 빨리 업데이트되기 때문이죠.
vue-cli
vue-cli document
2. InstallationEnvironment
여기에 npm install -g @vue/cli 및 Yarn global add @vue/cli를 사용하는 것이 좋습니다. 다른 작업도 완료해야 하며 설정도 몇 분 안에 일부 파일을 삭제 생성했습니다.
npm install -g @vue/cli # or yarn global add @vue/cli # 使用vue命令,创建项目(不同于cli2.0的init,create) vue create my-project
yarn global add @vue/cli를 사용하여 설치하는 경우 디렉터리를 입력해야 합니다. 실행
yarn // 安装项目依赖 cd packages/@vue/cli // 目录 yarn link //添加 link `vue` 执行指命 。 vue create my-project // 创建项目 。
3. 다중 환경 구성
회사에는 개발 환경, 테스트 환경, 공동 디버깅 환경, 온라인 환경이 있기 때문입니다. 수동 구성을 줄이고 한 번에 구성하십시오. 따라서 2.0.x에서는 "package.json "tt": "node build/tt-build.js"" 유형의 구성이 추가되어 많은 파일을 구성할 수 없었습니다. vue-cli 3.0.x에서는 ".env" 파일 구성이 지원됩니다. 여기에 ".env.development", ".env.production" 및 ".env.test" 구성을 추가했습니다.
1. 기본 대응 및 기본값
development is used by vue-cli-service serve production is used by vue-cli-service build test is used by vue-cli-service test
2. 구성 지정부터 시작
다른 구성을 추가하려면 아래 구성을 지정해야 합니다.
"dev-build": "vue-cli-service build --mode development",
3.".env "구성 파일Write
구성 파일 내용 형식은 다음과 같습니다.
VUE_APP_*
예: ".env.production" 내용은 다음과 같습니다
VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
4.
console.log(process.env.VUE_APP_MOCK_URL); process.env.NODE_ENV // 特定 BASE_URL // vue.config.js 配置읽으셨을 거라 믿습니다. 이 기사의 경우 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요! 추천 자료:
JS를 사용하여 재계산을 위해 여러 배열을 병합하는 방법
위 내용은 vue-cli 3.0.x 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!