Vue 프로젝트가 시작된 후 열리는 브라우저를 설정하는 방법

Vue 프로젝트 개발 과정에서 우리는 일반적으로 webpack-dev-server 또는 Vue-CLI에서 제공하는 서비스를 사용하여 로컬 개발 서버를 시작합니다. 이러한 개발 서버가 시작된 후 자동으로 기본 브라우저를 열고 프로젝트 루트 디렉터리의 홈페이지를 방문합니다. 그러나 개발 중에 Chrome을 기본 브라우저로 사용하려는 경우와 같이 시작 시 지정된 브라우저를 열어야 하는 경우도 있습니다.

그렇다면 Vue 프로젝트가 시작 후 지정된 브라우저를 열도록 설정하는 방법은 무엇입니까? 실제로는 매우 간단합니다. 이 글에서는 이 목표를 달성하기 위한 두 가지 방법을 소개하겠습니다.

1. vue-cli와 함께 제공되는 구성 파일을 사용하세요

Vue-CLI 버전 3.x 이상이 설치된 프로젝트에서는 프로젝트 루트 디렉터리에서 vue.config.js 구성 파일을 찾을 수 있습니다. 기본 구성을 재정의하고 확장합니다. 파일에 다음 구성을 추가하여 시작 시 브라우저를 설정할 수 있습니다.

module.exports = {
  devServer: {
    open: 'chrome', // 设置启动时的浏览器
    port: 8080 // 设置端口号
  }
}

여기서 열기 구성 항목을 chrome으로 설정했는데, 이는 시작 시 Chrome 브라우저를 사용한다는 의미입니다. 포트 번호 및 기타 관련 devServer 구성 항목을 설정할 수도 있습니다. 수정 사항을 저장하고 개발 서버를 시작하면 Chrome 브라우저가 자동으로 열리고 프로젝트 루트 디렉터리의 홈페이지를 방문합니다.

2. cross-env 및 open 명령 사용

Vue-CLI 2.x 또는 webpack-dev-server를 사용하는 다른 프로젝트에서 시작 시 브라우저를 설정해야 하는 경우 cross-env 및 open 명령을 사용할 수 있습니다. 먼저 프로젝트에 크로스 환경 종속성을 설치해야 합니다.

npm install cross-env --save-dev

그런 다음 package.json 파일에 다음 명령을 추가합니다.

{
  "scripts": {
    "dev": "cross-env BROWSER=chrome webpack-dev-server --open --port 8080"
  }
}

여기서 BROWSER 구성 항목을 chrome으로 설정합니다. 시작 시 Chrome 브라우저. 또한 --open 및 --port 옵션을 사용하여 브라우저가 자동으로 열리도록 설정하고 포트 번호를 지정했습니다. npm run dev 명령을 실행하여 개발 서버를 시작하면 Chrome 브라우저가 자동으로 열리고 프로젝트 루트 디렉터리의 홈페이지를 방문합니다.

요약

이 기사에서는 시작 후 지정된 브라우저를 열도록 Vue 프로젝트를 설정하는 두 가지 방법, 즉 vue-cli와 함께 제공되는 구성 파일과 cross-env 및 open 명령을 사용하는 방법을 소개합니다. 어떤 방법을 사용하든 우리는 선호하는 브라우저를 사용하여 개발하는 동안 편리하게 미리 보고 디버깅할 수 있습니다.

위 내용은 Vue 프로젝트가 시작된 후 열리는 브라우저를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!