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

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

---

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

---

Vue-cli 웹팩 템플릿의 포트는 앱 루트의 myApp/config/index.js.

해야 할 일은 블록 port내부의 값을 수정하는 것입니다 dev.

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

이제 다음을 사용하여 앱에 액세스 할 수 있습니다. localhost:4545

또한 .env거기에서 설정하는 것이 더 나은 파일이 있다면

---

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의 고궁 박물원 스크립트에 포트 옵션을 전달합니다. v3.4.1 이상이므로 예를 들어 vue-cli-service serve --port 3000.
• 환경 변수 $PORT, 예 :PORT=3000 npm run serve
• .env 파일, 더 구체적인 환경은 덜 구체적인 환경을 재정의합니다. PORT=3242
• vue.config.js,, devServer.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 에서 찾을 수 있습니다.

문서에 명시된대로 "webpack-dev-server의 모든 옵션"( https://webpack.js.org/configuration/dev-server/ )은 devServer섹션 에서 사용할 수 있습니다 .

---

에서 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 3을 사용하는 경우 또 다른 옵션은 구성 파일을 사용하는 것입니다. 를 확인 vue.config.js하여 같은 수준 package.json때문에 같은 설정을 넣어 :

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

스크립트로 구성 :

npm run serve --port 3000

훌륭하게 작동하지만 더 많은 구성 옵션이 있으면 구성 파일에서 수행하는 것을 좋아합니다. 문서 에서 더 많은 정보를 찾을 수 있습니다 .

---

Best way is to update the serve script command in your package.json file. Just append --port 3000 like so:

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

---

An alternative approach with vue-cli version 3 is to add a .env file in the root project directory (along side package.json) with the contents:

PORT=3000

Running npm run serve will now indicate the app is running on port 3000.

---

In my vue project in visual studio code, I had to set this in /config/index.js. Change it in the:

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    
         }
}

---

Add the PORT envvariable to your serve script in package.json:

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

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