So ändern Sie die Portnummer im Vue-cli-Projekt so, dass sie auf einem anderen Port anstelle von 8080 ausgeführt wird.

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

Sie müssen lediglich den portWert innerhalb des devBlocks ändern :

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

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

auch wenn Sie eine .envbessere Datei haben , um sie von dort aus einzustellen

Wenn Sie vue-cli3.x verwenden, können Sie den Port einfach npmwie folgt an den Befehl übergeben:

npm run serve -- --port 3000

Dann besuchen http://localhost:3000/

Spät zur Party, aber ich denke, es ist hilfreich, all diese Antworten in einer zusammenzufassen, in der alle Optionen aufgeführt sind.

Getrennt in Vue CLI v2 (Webpack-Vorlage) und Vue CLI v3, sortiert nach Rangfolge (hoch bis niedrig).

Vue CLI v3

• package.json: Portoption zum serveSkript hinzufügen:scripts.serve=vue-cli-service serve --port 4000
• CLI Option --portzu npm run servez npm run serve -- --port 3000. Beachten Sie --, dass dadurch die Port-Option an das npm-Skript anstatt an npm selbst übergeben wird. Seit mindestens v3.4.1 sollte es zB seinvue-cli-service serve --port 3000 .
• Umgebungsvariable $PORT, zPORT=3000 npm run serve
• .env Dateien, spezifischere Umgebungen überschreiben weniger spezifische, z PORT=3242
• vue.config.js, devServer.portZBdevServer: { port: 9999 }

Verweise:

• 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 (veraltet)

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

Verweise:

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

Zum Zeitpunkt des Schreibens dieser Antwort (5. Mai 2018) vue-cliwird die Konfiguration unter gehostet <your_project_root>/vue.config.js. Informationen zum Ändern des Anschlusses finden Sie 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.jsReferenz finden Sie hier: https://cli.vuejs.org/config/#global-cli-config

Beachten Sie, dass, wie in den Dokumenten angegeben, "Alle Optionen für den Webpack-Dev-Server" ( https://webpack.js.org/configuration/dev-server/ ) in diesem devServerAbschnitt verfügbar ist .

Eine andere Option, wenn Sie vue cli 3 verwenden, ist die Verwendung einer Konfigurationsdatei. Machen Sie eine vue.config.jsauf der gleichen Ebene wie Ihre package.jsonund setzen Sie eine Konfiguration wie folgt:

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

Konfigurieren Sie es mit dem Skript:

npm run serve --port 3000

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

Am besten aktualisieren Sie den Serveskript-Befehl in Ihrer package.jsonDatei. Einfach so anhängen --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"
},

In der 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 unter module.exports-> devServer-> ändern port.

Dann restratieren Sie die npm run dev. Das kannst du bekommen.

Wenn Sie den localhost-Port ändern möchten, können Sie das Skript- Tag in package.json ändern :

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

Ein alternativer Ansatz mit vue-cliVersion 3 besteht darin, eine .envDatei im Stammprojektverzeichnis (nebeneinander package.json) mit dem Inhalt hinzuzufügen :

PORT=3000

Laufen npm run servezeigt nun die Anwendung auf Port 3000 läuft.

Es gibt hier viele Antworten, die je nach Version variieren. Daher dachte ich, ich würde die Antwort von Julien Le Coupanec ab Oktober 2018 bei Verwendung der Vue-CLI bestätigen und erläutern . In der neuesten Version von Vue.js ab diesem Beitrag - [email protected] - waren die folgenden Schritte für mich am sinnvollsten, nachdem ich einige der unzähligen Antworten in diesem Beitrag durchgesehen hatte. Die Dokumentation zu Vue.js verweist auf Teile dieses Puzzles, ist jedoch nicht ganz so explizit.

1. Öffne das package.json Datei im Stammverzeichnis des Vue.js-Projekts.
2. Suchen Sie in der package.jsonDatei nach "port" .

3. Wenn Sie den folgenden Verweis auf "port" gefunden haben, bearbeiten Sie das serveSkriptelement so, dass es den gewünschten Port widerspiegelt. Verwenden Sie dazu die gleiche Syntax wie unten gezeigt:

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

4. Stellen Sie sicher, dass Sie den npmServer neu starten , um unnötigen Wahnsinn zu vermeiden.

Die Dokumentation zeigt, dass man effektiv das gleiche Ergebnis erzielen kann --port 8080, indem man am Ende des npm run serveBefehls Folgendes hinzufügt : npm run serve --port 8080. Ich habe es vorgezogen, das package.jsondirekt zu bearbeiten , um zusätzliches Tippen zu vermeiden, aber das npm run serve --port 1234Inline- Bearbeiten kann für einige nützlich sein.

Fügen Sie die PORTenvvariable Ihrem serveSkript hinzu in package.json:

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

Oh mein Gott! Es ist nicht so kompliziert, mit diesen Antworten, die auch funktionieren. Andere Antworten auf diese Frage funktionieren jedoch auch gut.

Wenn Sie das wirklich verwenden möchten vue-cli-serviceund die Porteinstellung in Ihrer package.jsonDatei haben möchten , die Ihr Befehl 'vue create <app-name>' grundsätzlich erstellt, können Sie die folgende Konfiguration verwenden : --port 3000. Die gesamte Konfiguration Ihres Skripts sieht also folgendermaßen aus:

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

Ich benutze @vue/cli 4.3.1 (vue --version)auf einem MacOS-Gerät.

Ich habe auch die vue-cli-service-Referenz hinzugefügt: https://cli.vuejs.org/guide/cli-service.html

In meinem Vue-Projekt in Visual Studio-Code musste ich dies in /config/index.js festlegen . Ä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    
         }
}

Gehen Sie zu node_modules/@vue/cli-service/lib/options.js.
Unten im "devServer" werden die Codes entsperrt.
Geben Sie nun Ihre gewünschte Portnummer im "Port" ein :)

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