vue+webpack 프로젝트의 실무 분석

이번에는 vue+webpack 프로젝트에 대한 실제 분석을 가져오겠습니다. vue+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

마지막으로

npm이 dev를 실행하면 테스트 인터페이스가 실행됩니다. 프로젝트를 패키징하기 위해

npm run build를 실행할 때 패키징되는 것은 서버의 공식 인터페이스입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 자료:

화살표 키를 바인딩하여 div 이동을 제어하는 ​​방법

font-awesome 글꼴 패키징 사용 사례 분석(코드 포함)

위 내용은 vue+webpack 프로젝트의 실무 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!