Jak zmienić numer portu w projekcie vue-cli


Odpowiedzi:


20

Port dla szablonu pakietu internetowego Vue-cli znajduje się w katalogu głównym aplikacji myApp/config/index.js.

Wszystko, co musisz zrobić, to zmodyfikować portwartość wewnątrz devbloku:

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

Teraz możesz uzyskać dostęp do swojej aplikacji za pomocą localhost:4545

także jeśli masz .envplik, lepiej ustawić go stamtąd


18
W najnowszej wersji vuejs. Plik nie jest już używany, zamiast tego używa: <your_project_root> /vue.config.js.
Jianwu Chen

3
Plik myApp/config/index.jsnie istnieje!
exhuma

3
Vue CLI 3 używa vue.config.js w katalogu głównym projektu. Musi być utworzony ręcznie IIRC.
Ege Ersoz

1
nie ma tam
vue.config.js

19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta

124

Jeśli używasz vue-cli3.x, możesz po prostu przekazać port do npmpolecenia w następujący sposób:

npm run serve -- --port 3000

Następnie odwiedź http://localhost:3000/


7
Zaoszczędziłeś mi cenny czas, ponieważ pierwszy --nie jest napisany w dokumencie: cli.vuejs.org/guide/cli-service.html#using-the-binary . Pisałem, npm run serve --port 3000co wydaje mi się logiczne, ale dostałem błędy ... Kciuki w górę!
toni07

3
To dlatego, że w pierwszych --ucieczek parametry podane npm run servei nie do vue-cli-service. Jeśli edytujesz package.jsoni servepolecenie bezpośrednio, "serve": "vue-cli-service serve --port 3000",
wpisujesz

93

Spóźniłem się na imprezę, ale myślę, że pomocne jest zebranie wszystkich odpowiedzi w jedną, przedstawiającą wszystkie opcje.

Oddzielone w Vue CLI v2 (szablon webpack) i Vue CLI v3, uporządkowane według pierwszeństwa (od wysokiego do niskiego).

Vue CLI v3

  • package.json: Dodaj opcję portu do serveskryptu:scripts.serve=vue-cli-service serve --port 4000
  • CLI Opcja --portdo npm run servenp npm run serve -- --port 3000. Zauważ --, że to sprawia, że ​​przekazuje opcję portu do skryptu npm zamiast do samego npm. Od co najmniej wersji 3.4.1 powinien być np vue-cli-service serve --port 3000.
  • Zmienna środowiskowa $PORT, npPORT=3000 npm run serve
  • .env Pliki, bardziej szczegółowe środowiska przesłaniają mniej specyficzne, np PORT=3242
  • vue.config.js, devServer.portnpdevServer: { port: 9999 }

Bibliografia:

Vue CLI v2 (przestarzałe)

  • Zmienna środowiskowa $PORT, npPORT=3000 npm run dev
  • /config/index.js: dev.port

Bibliografia:


3
Wygląda na to, zmienił się odrobinę w najnowszej vue CLI (przy użyciu 3.4.1), oto mój wiersz „służyć” w package.json: "serve": "vue-cli-service serve --port 4000",. Działa świetnie!
RoccoB

@RoccoB Dzięki, zweryfikowałem to i dodałem do odpowiedzi.
wwerner

Powyższe odpowiedzi nie działają obecnie w wersji 3. Wypróbowałem opcję .env, pakiet.json, vue.config.js i opcję poleceń CLI, ale wszystkie są ignorowane. Docs plik konfiguracyjny powiedzieć „Niektóre wartości podoba host, porta httpsmoże być zastąpione przez flagi linii poleceń”. cli.vuejs.org/config/#devserver Czy czegoś mi brakuje? Czy ktoś jeszcze ma problemy?
Ryan

2
@Ryan - To odnotowano wczoraj w VueJS CLI Problemy repozytorium github.com/vuejs/vue-cli/issues/4452 To mówi zainstalować portfinder ( github.com/http-party/node-portfinder ) jak było przełomowa zmiana, która się z tym wydarzyła
Angelo

38

W chwili pisania tej odpowiedzi (5 maja 2018 r.) vue-cliJej konfiguracja jest hostowana pod adresem <your_project_root>/vue.config.js. Aby zmienić port, zobacz poniżej:

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

Pełne vue.config.jsodniesienie można znaleźć tutaj: https://cli.vuejs.org/config/#global-cli-config

Zauważ, że zgodnie z dokumentacją „Wszystkie opcje dla webpack-dev-server” ( https://webpack.js.org/configuration/dev-server/ ) są dostępne w devServersekcji.


1
@srf: edycja odpowiedzi. Dziękuję za wskazanie zepsutego linku.
TomyJaya,

Musiał być \. efekt na tej stronie :)
killjoy

13

Inną opcją, jeśli używasz vue cli 3, jest użycie pliku konfiguracyjnego. Utwórz plik vue.config.jsna tym samym poziomie co twój package.jsoni umieść konfigurację w następujący sposób:

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

Konfiguracja za pomocą skryptu:

npm run serve --port 3000

działa świetnie, ale jeśli masz więcej opcji konfiguracyjnych, lubię to robić w pliku konfiguracyjnym. Więcej informacji można znaleźć w dokumentacji .


1
Podoba mi się ta odpowiedź, ponieważ pokazuje, że vue.config.js może być użyty do zmiany portu i pozostawienia wszystkiego tak, jak jest, o co pierwotnie pytano.
Twisted

9

Najlepszym sposobem jest zaktualizowanie polecenia służącego do obsługi skryptu w package.jsonpliku. Po prostu dołącz w ten --port 3000sposób:

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

8

W webpack.config.js:

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

Możesz zmienić port w module.exports-> devServer-> port.

Następnie ograniczasz npm run dev. Możesz to zdobyć.


8

Jeśli chcesz zmienić port localhost, możesz zmienić tag scripts w package.json :

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

Dziękuję bardzo :-)
Adam Orlov

5

Alternatywnym podejściem w vue-cliwersji 3 jest dodanie .envpliku w głównym katalogu projektu (obok package.json) z zawartością:

PORT=3000

Uruchomiona npm run servebędzie teraz wskazywać, że aplikacja działa na porcie 3000.


4

Jest tutaj wiele odpowiedzi różniących się w zależności od wersji, więc pomyślałem, że potwierdzę i wyjaśnię powyższą odpowiedź Juliena Le Coupaneca z października 2018 r. Podczas korzystania z Vue CLI . W najnowszej wersji Vue.js z tego postu - vue@2.6.10 - opisane poniżej kroki miały dla mnie największy sens po przejrzeniu kilku niezliczonych odpowiedzi w tym poście. Dokumentacja Vue.js zawiera odniesienia do elementów tej układanki, ale nie jest to tak wyraźne.

  1. Otwórz package.jsonplik w katalogu głównym projektu Vue.js.
  2. Wyszukaj „port” w package.jsonpliku.
  3. Po znalezieniu następującego odniesienia do „portu”, edytuj serveelement skryptu, aby odzwierciedlał żądany port, używając tej samej składni, jak pokazano poniżej:

    "scripts": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. Pamiętaj, aby ponownie uruchomić npmserwer, aby uniknąć niepotrzebnego szaleństwa.

Dokumentacja pokazuje, że można skutecznie uzyskać ten sam rezultat poprzez dodanie --port 8080do końca npm run servepolecenia tak: npm run serve --port 8080. Wolałem edytować package.jsonbezpośrednio, aby uniknąć dodatkowego wpisywania, ale edycja bezpośrednia npm run serve --port 1234może być przydatna dla niektórych.


1

Dodaj PORTzmienną środowiska do swojego serveskryptu w package.json:

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

1

O mój Boże! Nie jest to zbyt skomplikowane, z tymi odpowiedziami, które również działają. Jednak inne odpowiedzi na to pytanie również działają dobrze.

Jeśli naprawdę chcesz używać vue-cli-service, a jeśli chcesz mieć ustawienie portu w swoim package.jsonpliku, który swoją „vue tworzenia <app-name>” komenda tworzy w zasadzie, można użyć następującej konfiguracji: --port 3000. Więc cała konfiguracja twojego skryptu wyglądałaby tak:

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

Używam @vue/cli 4.3.1 (vue --version)na urządzeniu z systemem macOS.

Dodałem również odniesienie do usługi vue-cli: https://cli.vuejs.org/guide/cli-service.html


0

W moim projekcie vue w Visual Studio Code musiałem ustawić to w /config/index.js . Zmień to w:

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

Idź do node_modules/@vue/cli-service/lib/options.js
Na dole wewnątrz "devServer" odblokuj kody
Teraz podaj żądany numer portu w "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 => {}
}

3
przejdź do node_modules / @ vue / cli-service ...? Czy to nie jest nadpisywane podczas aktualizacji npm?
Joeri
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.