it-swarm.com.de

So ändern Sie die Portnummer im vue-cli-Projekt

So ändern Sie die Portnummer in einem Vue-cli-Projekt, sodass sie nicht an 8080, sondern an einem anderen Port ausgeführt wird.

28
salman

Der Port für die Vue-cli-Webpack-Vorlage befindet sich im myApp/config/index.js Ihres App-Roots. 

Alles was Sie tun müssen, ist den port-Wert innerhalb des dev-Blocks zu ändern:

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

Jetzt können Sie mit localhost:4545 auf Ihre App zugreifen. 

auch wenn Sie .env-Datei haben, um sie dort besser einzustellen

10
samayo

Wenn Sie vue-cli 3.x verwenden, können Sie den Port einfach wie folgt an den Befehl npm übergeben:

npm run serve -- --port 3000

Dann besuchen Sie http://localhost:3000/

34
Nick Litwin

Zum Zeitpunkt des Schreibens dieser Antwort (5. Mai 2018) wird bei vue-cli die Konfiguration unter <your_project_root>/vue.config.js gehostet. Um den Port zu ändern, siehe unten: 

// 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,
  },
  // ...
}

Die vollständige vue.config.js-Referenz finden Sie hier: https://cli.vuejs.org/config/#global-cli-config

Beachten Sie, dass, wie in den Dokumenten angegeben, "Alle Optionen für webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) im Abschnitt devServer verfügbar ist. 

22
TomyJaya

Spät zur Party, aber ich halte es für hilfreich, alle diese Antworten in einer Liste zusammenzufassen, in der alle Optionen skizziert werden.

Getrennt in Vue CLI v2 (Webpack-Vorlage) und Vue CLI v3, nach Priorität geordnet (hoch nach niedrig).

Vue CLI v3

  • package.json: Portoption zu serve-Skript hinzufügen: scripts.serve=vue-cli-service serve --port 4000
  • CLI-Option --port bis npm run serve, z. npm run serve -- --port 3000. Beachten Sie, dass -- die Port-Option an das npm-Skript und nicht an npm selbst übergibt. Seit mindestens v3.4.1 sollte es z. vue-cli-service serve --port 3000.
  • Umgebungsvariable $PORT, z. PORT=3000 npm run serve
  • .env Dateien, spezifischere Umgebungen, überschreiben weniger spezifische, z. PORT=3242
  • vue.config.js, devServer.port, z. devServer: { port: 9999 }

Verweise: 

Vue CLI v2 (veraltet)

  • Umgebungsvariable $PORT, z. PORT=3000 npm run dev
  • /config/index.js: dev.port

Verweise:

16
wwerner

Im webpack.config.js:

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

Sie können den Port in module.exports -> devServer -> port ändern.

Dann bewerten Sie den npm run dev. Das kannst du bekommen. 

5
aircraft

Wenn Sie vue cli 3 verwenden, können Sie auch eine Konfigurationsdatei verwenden. Erstellen Sie einen vue.config.js auf derselben Ebene wie Ihr package.json und geben Sie eine Konfiguration wie folgt ein:

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

Konfigurieren Sie es mit dem Skript:

npm run serve --port 3000

funktioniert super, aber wenn Sie mehr Konfigurationsoptionen haben, mache ich das gerne in einer Konfigurationsdatei. Weitere Informationen finden Sie in den docs

3
derFBeste

Am besten aktualisieren Sie den Befehl serv script in Ihrer package.json-Datei. Fügen Sie einfach --port 3000 so hinzu:

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

In meinem vue Projekt in Visual Studio Code musste ich dies in / config/index.js einstellen. Ändern Sie es in:

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    
         }
}
0
Terje Solem

Fügen Sie die Variable PORT zu Ihrem Skript serve in package.json Hinzu:

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

Ein alternativer Ansatz für vue-cli Version 3 ist das Hinzufügen einer .env-Datei im Hauptprojektverzeichnis (neben package.json) mit dem Inhalt:

PORT=3000

Beim Ausführen von npm run serve wird jetzt angezeigt, dass die App auf Port 3000 ausgeführt wird.

0
Chris Dickson