vue+webpack을 사용하여 프로젝트를 만드는 방법(코드 포함)

이번에는 vue+webpack을 사용하여 프로젝트를 만드는 방법(코드 포함)과 vue+webpack을 사용하여 프로젝트를 만들 때 주의사항에 대해 설명하겠습니다.

webpack을 사용하여 프로덕션 환경과 릴리스 환경에 대해 서로 다른 인터페이스 주소를 구성합니다.

개발 중에 프런트엔드와 백엔드가 동시에 개발됩니다. 백엔드를 호출하기 위해 프런트엔드에서 제공하는 인터페이스도 LAN 내에 있습니다. 그러나 프로젝트가 온라인으로 푸시되면 인터페이스는 실제 서버에서 획득되며 테스트 인터페이스와 실제 인터페이스 사이를 자주 전환하는 것은 매우 역겹습니다.

첫 번째 단계는 webpack 구성 파일에서 다른 인터페이스 주소를 설정하는 것입니다.

dev.en.js 파일을 엽니다. 다음과 같이 수정하세요.

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})

prod.env.js 파일에도

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

두 번째 단계는 코드에서 설정된 매개변수를 호출하는 것입니다

예를 들어 광산: src/config/api.js 파일

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'

// 新配置的API接口地址
var root = process.env.API_ROOT

I 내가 읽었다고 믿으세요. 이 기사의 경우에는 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React 애플리케이션 개발 스캐폴딩 사용 사례

js를 사용하여 이미지를 base64로 변환하는 방법

위 내용은 vue+webpack을 사용하여 프로젝트를 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!