Vue 웹팩을 사용하는 방법

이번에는 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

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

추천 자료:

Vue가 beforeEnter 후크 기능을 구현하는 방법

JS 이미지를 base64 메소드 요약으로

위 내용은 Vue 웹팩을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!