Come cambiare il numero di porta nel progetto Vue-cli in modo che venga eseguito su un'altra porta invece che su 8080.

La porta per il modello del pacchetto web Vue-cli si trova nella radice della tua app myApp/config/index.js.

Tutto quello che devi fare è modificare il portvalore all'interno del devblocco:

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

Ora puoi accedere alla tua app con localhost:4545

anche se hai .envfile è meglio impostarlo da lì

Se stai usando vue-cli3.x, puoi semplicemente passare la porta al npmcomando in questo modo:

npm run serve -- --port 3000

Quindi visita http://localhost:3000/

In ritardo alla festa, ma penso che sia utile consolidare tutte queste risposte in una che delinea tutte le opzioni.

Separato in Vue CLI v2 (modello webpack) e Vue CLI v3, ordinato per precedenza (dal più alto al più basso).

Vue CLI v3

• package.json: Aggiungi l'opzione porta allo servescript:scripts.serve=vue-cli-service serve --port 4000
• Opzione CLI --portper npm run serve, ad es npm run serve -- --port 3000. Nota che --questo fa passare l'opzione port allo script npm invece che allo stesso npm. Almeno dalla v3.4.1, dovrebbe essere ad es vue-cli-service serve --port 3000.
• Variabile d'ambiente $PORT, esPORT=3000 npm run serve
• .env File, env più specifici sovrascrivono quelli meno specifici, es PORT=3242
• vue.config.js, devServer.port, Ad esempiodevServer: { port: 9999 }

Riferimenti:

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

• Variabile d'ambiente $PORT, esPORT=3000 npm run dev
• /config/index.js: dev.port

Riferimenti:

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

Al momento della scrittura di questa risposta (5 maggio 2018), la vue-clisua configurazione è ospitata in <your_project_root>/vue.config.js. Per cambiare la porta, vedi sotto:

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

Il vue.config.jsriferimento completo può essere trovato qui: https://cli.vuejs.org/config/#global-cli-config

Notare che, come indicato nella documentazione, "Tutte le opzioni per webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) è disponibile all'interno della devServersezione.

Un'altra opzione se stai usando vue cli 3 è usare un file di configurazione. Crea uno vue.config.jsallo stesso livello del tuo package.jsone metti una configurazione in questo modo:

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

Configurandolo con lo script:

npm run serve --port 3000

funziona alla grande ma se hai più opzioni di configurazione mi piace farlo in un file di configurazione. Puoi trovare maggiori informazioni nei documenti .

Il modo migliore è aggiornare il comando serve script nel package.jsonfile. Basta aggiungere in questo --port 3000modo:

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

In webpack.config.js:

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

È possibile modificare la porta in module.exports-> devServer-> port.

Quindi restringi il file npm run dev. Puoi ottenerlo.

Se vuoi cambiare la porta localhost, puoi cambiare il tag scripts in package.json :

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

Un approccio alternativo con la vue-cliversione 3 consiste nell'aggiungere un .envfile nella directory principale del progetto (a lato package.json) con il contenuto:

PORT=3000

L'esecuzione npm run serveora indicherà che l'app è in esecuzione sulla porta 3000.

Ci sono molte risposte qui che variano in base alla versione, quindi ho pensato di confermare ed esporre la risposta di Julien Le Coupanec sopra dall'ottobre 2018 quando si utilizza Vue CLI . Nella versione più recente di Vue.js a partire da questo post - vue@2.6.10 - i passaggi descritti di seguito hanno avuto più senso per me dopo aver esaminato alcune delle miriadi di risposte in questo post. La documentazione di Vue.js fa riferimento a pezzi di questo puzzle, ma non è così esplicita.

1. Apri il package.jsonfile nella directory principale del progetto Vue.js.
2. Cerca "porta" nel package.jsonfile.

3. Dopo aver trovato il seguente riferimento a "porta", modificare l' serveelemento script per riflettere la porta desiderata, utilizzando la stessa sintassi mostrata di seguito:

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

4. Assicurati di riavviare il npmserver per evitare una follia non necessaria.

Gli spettacoli di documentazione che si può effettivamente ottenere lo stesso risultato con l'aggiunta --port 8080alla fine del npm run servecomando in questo modo: npm run serve --port 8080. Ho preferito modificare package.jsondirettamente per evitare di digitare in più, ma la modifica in npm run serve --port 1234linea potrebbe tornare utile per alcuni.

Aggiungi PORTenvvariable al tuo servescript in package.json:

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

Oh mio Dio! Non è molto complicato, con queste risposte che funzionano anche. Tuttavia, anche altre risposte a questa domanda funzionano bene.

Se davvero si vuole utilizzare l' vue-cli-servicee se si vuole avere l'impostazione della porta nel package.jsonfile, che il vostro 'vue creare <app-name>' comando crea in sostanza, è possibile utilizzare la seguente configurazione: --port 3000. Quindi l'intera configurazione del tuo script sarebbe così:

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

Sto usando @vue/cli 4.3.1 (vue --version)su un dispositivo macOS.

Ho anche aggiunto il riferimento a vue-cli-service: https://cli.vuejs.org/guide/cli-service.html

Nel mio progetto vue in codice visual studio, ho dovuto impostarlo in /config/index.js . Cambialo 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    
         }
}

Vai a node_modules/@vue/cli-service/lib/options.js
In fondo a "devServer" sblocca i codici
Ora dai il numero di porta desiderato nella "porta" :)

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