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섹션 에서 사용할 수 있습니다 .

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

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

스크립트로 구성 :

npm run serve --port 3000

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

가장 좋은 방법은 package.json파일 에서 serve 스크립트 명령을 업데이트하는 것 입니다. 다음 --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"
},

에서 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. 당신은 그것을 얻을 수 있습니다.

localhost 포트를 변경하려면 package.json 에서 scripts 태그를 변경할 수 있습니다 .

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

vue-cli버전 3 의 또 다른 방법 .env은 루트 프로젝트 디렉토리 (옆에있는 package.json)에 내용과 함께 파일 을 추가하는 것입니다 .

PORT=3000

npm run serve이제 Running 은 앱이 포트 3000에서 실행 중임을 나타냅니다.

버전에 따라 여기에 많은 답변이 있으므로 Vue CLI를 사용할 때 2018 년 10 월부터 Julien Le Coupanec의 답변을 확인하고 설명하겠다고 생각했습니다 . -이 게시물의 같은 Vue.js의 최신 버전에서 vue@2.6.10 - 아래 설명 된 단계는이 게시물에 무수한 몇 가지 답변을 통해보고 후 나에게 가장 적합한했다. Vue.js 문서 는이 퍼즐 의 일부를 참조하지만 그렇게 명시 적이지는 않습니다.

1. package.jsonVue.js 프로젝트의 루트 디렉터리에서 파일을 엽니 다 .
2. package.json파일 에서 "port"를 검색 하십시오.

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

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

4. npm불필요한 광기를 피하기 위해 서버 를 다시 시작하십시오 .

문서는 다음과 같이 명령 --port 8080끝에 추가하여 동일한 결과를 효과적으로 얻을 수 있음을 보여줍니다 . 추가 입력을 피하기 위해 직접 편집하는 것을 선호 했지만 인라인 편집 은 일부 사용자에게는 유용 할 수 있습니다.npm run servenpm run serve --port 8080package.jsonnpm run serve --port 1234

스크립트에 PORTenvvariable을 추가하십시오 .servepackage.json

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

세상에! 이 답변도 작동하므로 그렇게 복잡하지 않습니다. 그러나이 질문에 대한 다른 답변도 잘 작동합니다.

을 정말로 사용하고 vue-cli-service싶다면 package.json'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 참조도 추가했습니다 : https://cli.vuejs.org/guide/cli-service.html

Visual Studio 코드의 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.js로 이동
하십시오. "devServer"내부의 하단에서 코드를 차단 해제하십시오.
이제 "port"에 원하는 포트 번호를 입력하십시오. :)

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