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

마지막으로

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

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

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

추천 자료:

react는 antd 구성 요소와 협력하여 백엔드 시스템을 구축합니다.

Vue+beforeEnter는 후크 기능을 사용합니다

위 내용은 Vue webpack 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!