vue-cli 프로젝트에서 포트 번호를 변경하는 방법

vue-cli 프로젝트에서 포트 번호를 변경하는 방법

Vue-cli 프로젝트에서 포트 번호를 변경하여 8080이 아닌 다른 포트에서 실행하는 방법

만약 당신이 사용하고 있는 경우vue-cli3.x, 간단히 항구를 통과하면npm다음과 같이 명령한다.

npm run serve -- --port 3000

그럼 방문하십시오.http://localhost:3000/

파티에 늦었지만, 나는 이 모든 대답을 모든 선택지를 요약하는 하나로 통합하는 것이 도움이 된다고 생각한다.

Vue CLI v2(웹 팩 템플릿)와 Vue CLI v3로 구분되며, 우선 순위(높음에서 낮음)로 정렬됨.

Vue CLI v3

• package.json: 에 포트 옵션 추가serve스크립트:scripts.serve=vue-cli-service serve --port 4000
• CLI 옵션--port로npm run serve, 예:npm run serve -- --port 3000. 참고하십시오.--이렇게 하면 포트 옵션이 npm 자체 대신 npm 스크립트로 전달된다..4.1 vue-cli-service serve --port 3000.
• 환 수식$PORT, 예:PORT=3000 npm run serve
• .env파일, 좀 더 구체적인 환경은 덜 구체적인 환경보다 우선한다(예:PORT=3242
• vue.config.jsdevServer.port, 예:devServer: { port: 9999 }

참조:

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2(사용되지 않음)

• 환 수식$PORT, 예:PORT=3000 npm run dev
• /config/index.js:dev.port

참조:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

이 답변의 작성 시점(2018년 5월 5일)으로서,vue-cli 한다.<your_project_root>/vue.config.js. 포트를 변경하려면 아래를 참조하십시오.

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

가득찬vue.config.js참조: https://cli.vuejs.org/config/#global-cli-config

문서에 명시된 대로 "웹 팩-dev-server에 대한 모든 옵션"(https://webpack.js.org/configuration/dev-server/)은devServer단면도

Vue-cli 웹 팩 템플릿용 포트는 앱 루트의 에 있습니다.

당신이 해야 할 일은 단지 수정하는 것이다.port내면을 중시하다dev블록:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

이제 당신은 당신의 앱에 접속할 수 있다.localhost:4545

또한 만약 당신이 가지고 있다면.env거기서부터 그것을 설정하는 것이 더 낫다.

vue cli 3을 사용하는 경우 또 다른 옵션은 구성 파일을 사용하는 것이다.만들다vue.config.js자네와 같은 수준으로package.json다음과 같은 구성을 입력하십시오.

module.exports = {
  devServer: {
    port: 3000
  }
}

스크립트를 사용하여 구성:

npm run serve --port 3000

잘 되긴 하지만, 만약 당신이 더 많은 구성 옵션을 가지고 있다면 나는 그것을 구성 파일에서 하는 것이 좋다.문서에서 더 많은 정보를 찾을 수 있다.

가장 좋은 방법은 serve script 명령을 업데이트하는 것이다.package.json만 추가하면 된다. 추가만 하면 된다.--port 3000다음과 같다:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},

첫 번째 옵션:

패키지 열기.json 및 "-포트 포트 번호"를 "-포트 포트 번호" 섹션에 추가하십시오.

아래처럼, 나는 그것을 했다.

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

두 번째 옵션:명령 프롬프트를 통해 원하는 경우

npm run serve --port 8090

로컬 호스트 포트를 변경하려면 패키지에서 스크립트 태그를 변경하십시오.json:

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

에서webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

포트 가가에서 항구를 할 수 .module.exports->devServer->port.

그럼 당신이 접근 금지.npm run dev넌 그걸 얻을 수 있어.

어머나 세상에!이 답들 또한 효과가 있는 것으로는 그리 복잡하지 않다.그러나, 이 질문에 대한 다른 대답도 잘 듣는다.

만약 당신이 정말로 사용하기를 원한다면vue-cli-service 만약 의 포트 을에서 은 경우이다.package.json은 'vue create <app-name> 명령 이 기기로서 'vue create <app-name>을 만들면 --port 3000스크립트의 전체 구성은 다음과 같을 겁니다.

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

나는 사용하고 있다@vue/cli 4.3.1 (vue --version)MacOS 기기에서.

vue-cli-service reference도 추가했다. https://cli.vuejs.org/guide/cli-service.html

에 대한 대안적 접근법vue-cli버전 3은 a를 추가하는 것이다..env루트 프로젝트 디렉터리(옆으로)에 파일 저장package.json의 :() 포함 : 포함:

PORT=3000

달리기npm run serve이제 앱이 포트 3000에서 실행 중임을 나타낼 것이다.

이곳에는 버전별로 답변이 다양해 2018년 10월부터는 쥴리앙 르 쿠파넥의 답변을 확인하고 부에 CLI를 사용할 때 자세히 설명해야겠다고 생각했다.이 포스트의 가장 최근 버전인 Vue.js에서 아래 간략한 단계는 이 포스트의 무수한 답변 중 몇 가지를 살펴본 후 나에게 가장 이해가 갔다.Vue.js 문서는 이 퍼즐의 조각들을 참조하지만, 그다지 명백하지는 않다.

1. 오픈 더package.jsonVue.js 프로젝트의 루트 디렉터리에 파일 저장
2. 에서 "포트" 검색package.json파일

3. "포트"에 대한 다음 참조를 찾으면 편집하십시오.serve아래 표시된 것과 동일한 구문을 사용하여 원하는 포트를 반영하는 스크립트 요소:

   "scripts": {
     "serve": "vue-cli-service serve --port 8000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   }
   

4. 반드시 다시 시작하십시오.npm불필요한 광기를 방지하는 서버.

문서에는 추가함으로써 동일한 결과를 효과적으로 얻을 수 있음을 보여 준다.--port 8080npm run serve다음과 같이 명령한다.npm run serve --port 8080난 편집하는게 더 좋았어package.json추가 입력을 피하기 위해 직접 입력하지만 편집npm run serve --port 1234인라인도 어떤 사람들에게는 유용할 수 있다.

추가PORT당신에게는 부러운.serve각본으로 쓰다package.json:

"serve": "PORT=4767 vue-cli-service serve",

다음을 사용하는 경우:

yarn serve --port 3000

포트(NPM)를 변경하려면package.json . in.scripts예를 들어 다음과 같이 직접 대본을 작성하십시오.

"start": "npm run serve --port [PORT YOU WANT]"

그 다음부터 시작할 수 있다.npm start

비주얼 스튜디오 코드의 내 vue 프로젝트에서 나는 이것을 /config/index.js로 설정해야 했다.다음에서 변경:

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}

node_modules/@vue/cli-service/lib/options.jslote로
"devServer" 내부의 하단에서 코드 차단을 해제하십시오.
이제 "포트"에 원하는 포트 번호를 입력하십시오 :)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}

참조URL: https://stackoverflow.com/questions/47219819/how-to-change-port-number-in-vue-cli-project